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

【Flutter】Transform.rotateの使い方|ウィジェットを回転させて表示

Flutterのウィジェット「Transform.rotate」コンストラクタの使い方を紹介します。

「Transform.rotate」を使えばウィジェットを任意の角度回転させて表示できます。

目次

Transform.rotateの使い方

scale: 2
scale: 1
scale: 0.5

回転させたいウィジェットを「Transform.rotate」でラップし「angle」で回転角度を指定します。

○度時計回りに回転させたい場合は「○ * pi / 180」と書きます。「pi」はmathライブラリをインポートして使用できます。

Transform.rotate(
  angle: 45 * pi / 180,
  child: FlutterLogo(size: 200),
),

サンプルコード

import 'package:flutter/material.dart';
import 'dart:math';

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: Transform.rotate(
            angle: 45 * pi / 180,
            child: FlutterLogo(size: 200),
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

目次