Magicode logo
Magicode
2 min read

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

https://cdn.apollon.ai/media/notebox/b3bacd98-566c-468a-b4ba-446e606f8842.jpeg
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);

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

リンク

Discussion

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