【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part140 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part140 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part139 Material Components
引き続き、Material Componentsについて学びます。
Checkbox, Radio, Switchウィジェット
Checkbox, Radio, Switchウィジェットはその名の通りの部品です！
onChangeプロパティをnullにすると無効表示になります。
確かElevatedButtonもonPressプロパティをnullにすると無効表示になりましたかね。
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: Column(
children: <Widget>[
Checkbox(
value: checkboxValueA,
//本書では(bool value)となっていますがエラーとなります・・・。
onChanged: (value) {
setState(() {
checkboxValueA = value;
});
},
),
Row(children: <Widget>[
Radio<RadioValue>(
value: RadioValue.FIRST,
groupValue: radioValue,
onChanged: (value) {
setState(
() {
radioValue = value;
},
);
},
),
Radio<RadioValue>(
value: RadioValue.SECOND,
groupValue: radioValue,
onChanged: (value) {
setState(
() {
radioValue = value;
},
);
},
),
Radio<RadioValue>(
value: RadioValue.THIRD,
groupValue: radioValue,
onChanged: (value) {
setState(
() {
radioValue = value;
},
);
},
),
]),
Switch.adaptive(
value: switchValue,
onChanged: ((value) {
setState(() {
switchValue = value;
});
}),
),
],
),
),
),
);
}
}
赴くままに実装してみました！
少しレイアウトが変ですがよしとします。
最後に
執筆者様、抜粋コードじゃなくてコード全体を記載してくださいませ・・・。
今日はここまで！