Magicode logo
Magicode
0
・2 min read

Flutterで最新のマテリアルデザインであるMaterial3に対応する

Flutter

Flutter3で、最新のMaterial Design 3に対応したので、Flutterプロジェクト側でその対応をしてみます。

手順

以下の2つを追加することでFlutterプロジェクトをMaterial Design 3に対応させます。

  1. ThemeDataにuseMaterial3: trueを追加する
  2. 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);

  @override
  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,
       ),
     ),
  }
}

リンク

Material3 公式ページ

Discussion

コメントにはログインが必要です。