「Flutter 3.16にアップグレードしてデフォルトになったMaterial 3を無効化して元に戻したい」
今回はこんな悩みを解消します。
Flutter 3.16にアップグレードしたことでMaterial 3がデフォルトとなりました。そしてAppBarやFloatingActionButtonなどの見た目や余白がアッグレード前と後で異なる状態になってしまい元の状態に戻したいと思った方は少なくないはず。
そんな方のためにFlutter 3.16でデフォルトとなったMaterial 3を無効化させる方法について解説していきます！
目次
Material 3を無効化させる方法
Flutter 3.16以上でデフォルトとなったMaterial 3を無効化するにはMaterialAppのthemeプロパティにThemeDataを渡し、ThemeDataのuseMaterial3プロパティをfalseにするだけです。
MaterialApp(
theme: ThemeData(
useMaterial3: false,
),
home: MyWidget(),
);サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: false,
),
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
appBar: AppBar(
title: const Text('Flutter'),
),
);
}
}まとめ
今回はFlutter 3.16以上でデフォルトとなったMaterial 3を無効化する方法について解説しました。
結論としてはThemeDataのuseMaterial3プロパティをfalseにするだけでFlutter 3.16にアップグレードする以前の状態に簡単に戻せます。