docs

TOP(About this memo)) > 一覧(Flutter) > マテリアルデザイン

Material 3

Material Design is a design system built and supported by Google designers and developers. Material.io includes in-depth UX guidance and UI component implementations for Android, Flutter, and the Web.The latest version, Material 3, enables personal, adaptive, and expressive experiences – from dynamic color and enhanced accessibility, to foundations for large screen layouts and design tokens.

Flutterのmaterialライブラリ

マテリアルデザインの有効化

利用方法

import 'package:flutter/material.dart';

const seedColor = Color.fromARGB(255, 164, 206, 255);

final theme = ThemeData(
  useMaterial3: true,
  colorScheme:
      ColorScheme.fromSeed(seedColor: seedColor, brightness: Brightness.light),
);

main() => runApp(MaterialApp(
    theme: theme,
    home: Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              const Text("seed color:"),
              Container(
                decoration: const BoxDecoration(
                  color: seedColor,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                ),
                child: const SizedBox(
                  width: 10,
                  height: 10,
                ),
              )
            ],
          ),
          for (final (Color, Color, String, String) c in [
            (
              theme.colorScheme.primary,
              theme.colorScheme.onPrimary,
              "primary",
              "onPrimary",
            ),
            (
              theme.colorScheme.secondary,
              theme.colorScheme.onSecondary,
              "secondary",
              "onSecondary",
            ),
            (
              theme.colorScheme.tertiary,
              theme.colorScheme.onTertiary,
              "tertiary",
              "onTertiary",
            ),
            (
              theme.colorScheme.primaryContainer,
              theme.colorScheme.onPrimaryContainer,
              "primaryContainer",
              "onPrimaryContainer",
            ),
            (
              theme.colorScheme.secondaryContainer,
              theme.colorScheme.onSecondaryContainer,
              "secondaryContainer",
              "onSecondaryContainer",
            ),
            (
              theme.colorScheme.tertiaryContainer,
              theme.colorScheme.onTertiaryContainer,
              "tertiaryContainer",
              "onTertiaryContainer",
            ),
            (
              theme.colorScheme.background,
              theme.colorScheme.onBackground,
              "background",
              "onBackground",
            ),
            (
              theme.colorScheme.error,
              theme.colorScheme.onError,
              "error",
              "onError",
            ),
            (
              theme.colorScheme.errorContainer,
              theme.colorScheme.onErrorContainer,
              "errorContainer",
              "onErrorContainer",
            ),
            (
              theme.colorScheme.inversePrimary,
              theme.colorScheme.primary,
              "inversePrimary",
              "primary",
            ),
            (
              theme.colorScheme.inverseSurface,
              theme.colorScheme.onInverseSurface,
              "inversePrimary",
              "onInverseSurface",
            ),
          ])
            Container(
              decoration: BoxDecoration(
                color: c.$1,
                borderRadius: const BorderRadius.all(Radius.circular(10)),
              ),
              child: Text(
                "backgrond color: ${c.$3}, text color: ${c.$4}",
                style: TextStyle(color: c.$2),
              ),
            )
        ],
      ),
    )));

TextTheme

Material系のウィジェットは先祖にMaterialウィジェットを必要とする

testWidgets("", (widgetTester) async {
    await widgetTester.pumpWidget(MaterialApp(
      // home: ListTile(),// assert error
      home: Material(child: ListTile(),),
    ));
  });

// lib/src/material/list_tile.dart
class ListTile extends StatelessWidget {
    // ...
    @override
    Widget build(BuildContext context) {
        assert(debugCheckHasMaterial(context)); // 先祖のMaterialウィジェットが無い場合にassert error
        // ...
    }
    // ...
}

テーマの上書き

// 下記から抜粋
// https://stackoverflow.com/a/63777364/22090329
Theme(
    data: Theme.of(context).copyWith(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
    ),
    child: bottomNavigationBar(/* ... */)
)
This site is open source. Improve this page.