・2 min read
Flutterで最新のマテリアルデザインであるMaterial3に対応する
Flutter3で、最新のMaterial Design 3に対応したので、Flutterプロジェクト側でその対応をしてみます。
手順
以下の2つを追加することでFlutterプロジェクトをMaterial Design 3に対応させます。
- ThemeDataに
useMaterial3: trueを追加する - ThemeDataの
colorSchemeSeedで配色を設定する
コード
import 'package:flutter/material.dart';
void main() {
runApp(
const ProviderScope(
child: App(),
),
);
}
class App extends ConsumerWidget {
const App({Key? key}) : super(key: key);
Widget build(BuildContext context, WidgetRef ref) {
final router = ref.watch(routerProvider);
return MaterialApp(
title: 'Material3',
theme: ThemeData(
useMaterial3: true,
brightness: Brightness.light,
colorSchemeSeed: Colors.blueGrey,
),
darkTheme: ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
colorSchemeSeed: Colors.blueGrey,
),
),
}
}
