【Flutter】RotatedBox|画像を90度回転・半回転させる

今回はRotatedBoxの基本的な使い方を紹介します。

RotatedBoxを使えばTextImageなどのWidgetを90度または半回転できます。

\ 世界最大級のオンライン学習サービス /

目次

RotatedBoxの使い方

RotatedBox(
  quarterTurns: 1,
  child: Padding(
    padding: const EdgeInsets.all(40),
    child: Image.network(
        'https://images.unsplash.com/photo-1524638431109-93d95c968f03'),
  ),
),

RotatedBoxで回転させるWidgetをラップしquarterTurnsで回転の調整をします。

時計回りに90度、180度、270度回転させるにはquarterTurnsの引数にそれぞれ1、2、3を渡します。

quarterTurns: 1

quarterTurns: 2

サンプルコード

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: RotatedBox(
            quarterTurns: 1,
            child: Padding(
              padding: const EdgeInsets.all(40),
              child: Image.network(
                  'https://images.unsplash.com/photo-1524638431109-93d95c968f03'),
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次