世界最大級のオンライン学習サービス「Udemy(ユーデミー)」とは?

【Flutter】RotatedBoxの使い方|90度・180度・270度回転させて表示

Flutterのウィジェット「RotatedBox」の使い方を紹介します。

「RotatedBox」を使えばウィジェットを90度・180度・270度回転させて表示できます。

目次

RotatedBoxの使い方

quarterTurns: 1
quarterTurns: 2
quarterTurns: 3

回転させたいウィジェットを「RotatedBox」でラップし「quarterTurns」で回転させる角度を指定できます。

「quarterTurns」に「1」を渡せば時計回りに90度回転、「2」を渡せば180度回転できます。

RotatedBox(
  quarterTurns: 1,
  child: FlutterLogo(size: 200),
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: RotatedBox(
            quarterTurns: 1,
            child: FlutterLogo(size: 200),
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

目次