【 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: () {},
),
),
),
);
}
}
最後に
コンテンツに対して「コンテキストメニュー」を付与するような使い方のようです。
今日はここまで!
参考
ディスカッション
コメント一覧
まだ、コメントがありません