【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part141 Material Components

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part141 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part140 Material Components

引き続き、Material Componentsについて学びます。

Chipウィジェット

ChipウィジェットはマテリアルデザインのChipに対応します。

ActionChipウィジェット

ActionChipウィジェットはボタンのように利用するものです。無効状態にはできません。
カードの下や画面の下部など主要なコンテンツの後ろに表示します。

ボタンでも代替できるようですね。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyHomePage()));
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

enum RadioValue { FIRST, SECOND, THIRD }

class _MyHomePageState extends State<MyHomePage> {
  bool? checkboxValueA = true;
  RadioValue? radioValue = RadioValue.FIRST;
  bool switchValue = true;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('sample'),
        ),
        body: Center(
          child: ActionChip(
            avatar: CircleAvatar(
              backgroundColor: Colors.blue.shade800,
              child: Text('AB'),
            ),
            label: Text('Aaron Burr'),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

 

最後に

コンテンツに対して「コンテキストメニュー」を付与するような使い方のようです。

今日はここまで!

参考

Material Design