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

【Flutter】Transform.scaleの使い方|サイズを拡大・縮小させる

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

「Transform.scale」を使えば任意のウィジェットを拡大・縮小できます。

目次

Transform.scaleの使い方

scale: 2
scale: 1
scale: 0.5

サイズを拡大・縮小したいウィジェットを「Transform.scale」でラップし、「scale」で拡大率を調整できます。

「scale」のデフォルト値は「1」です。

Transform.scale(
  scale: 2,
  child: CupertinoSwitch(
    value: _value,
    onChanged: (value) => setState(() => _value = value),
  ),
),

軸別に拡大・縮小率を調整

scaleX: 2
scaleY: 2

水平方向の拡大率を変更するには「scaleX」、垂直方向の変更は「scaleY」で指定できます。

Transform.scale(
  scaleX: 2,
  child: CupertinoSwitch(
    value: _value,
    onChanged: (value) => setState(() => _value = value),
  ),
),

サンプルコード

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _value = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: Transform.scale(
            scale: 2,
            child: CupertinoSwitch(
              value: _value,
              onChanged: (value) => setState(() => _value = value),
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

目次