Flutterの練習２
前回のデフォルトのアプリのボタンをテキストボタンに変えて、リセットとマイナスを追加します。
なお、リセットを押したら、アラートダイアログを出して確認します。できたのはこちら。
1. 最初に関数を追加します。
void _decrementCounter() {
setState(() {
_counter--;
});
}
void _resetCounter() {
setState(() {
_counter = 0;
});
}
２. テキストボタンは本家のサイトを参考にしました。
まず、FloatingActionButtonをコメントアウト（消してもいいです）
// floatingActionButton: FloatingActionButton(
// onPressed: _incrementCounter,
// tooltip: 'Increment',
// child: const Icon(Icons.add),
// ), // This trailing comma makes auto-formatting nicer for build methods.
続いて、テキストボタンを３つ横に並べます。本家のサイトからほぼそのまま引用してます。ColumnをRowに変えた感じです。
リセットボタンにはアラートダイアログを表示するようにしています。本家のサイトから引用してます。
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
const SizedBox(height: 30),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
style: TextButton.styleFrom(
textStyle:
const TextStyle(fontSize: 20, color: Colors.blue),
),
onPressed: _incrementCounter,
child: const Text('PLUS'),
),
const SizedBox(width: 30),
TextButton(
style: TextButton.styleFrom(
textStyle:
const TextStyle(fontSize: 20, color: Colors.blue),
),
onPressed: () => showDialog( //ここからアラートダイアログを表示するコード
context: context,
builder: (BuildContext context) => AlertDialog(
title: const Text('AlertDialog'),
content: const Text('RESET counter?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => {
setState(() {
_resetCounter();
Navigator.pop(context, 'OK');
})
},
child: const Text('OK'),
),
],
),
),
child: const Text('RESET'),
),
const SizedBox(width: 30),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
),
),
TextButton(
style: TextButton.styleFrom(
foregroundColor: Colors.white,
padding: const EdgeInsets.all(16.0),
textStyle: const TextStyle(fontSize: 20),
),
onPressed: _decrementCounter,
child: const Text('MINUS'),
),
],
),
),
],
),
],
),
),