【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part138 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part138 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part137 Material Components
引き続き、Material Componentsについて学びます。
ButtonBar
ButtonBar
は適切な間隔を保ちつつボタンを配置するウィジェットです。
Row
ウィジェットと違って「適切な間隔」を自動で計算して配置してくれます。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('sample'),
),
body: ButtonBar(children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text('ボタン1')),
ElevatedButton(onPressed: () {}, child: const Text('ボタン2')),
ElevatedButton(onPressed: () {}, child: const Text('ボタン3')),
], alignment: MainAxisAlignment.spaceBetween),
),
);
}
}
間隔を指定していないのにきれいに並んでいます。
最後に
とっても便利そう!
Row
を学習しているときによく「間隔の調整たいへんだなぁ」と思っていました。
ほとんどの場面でButtonBar
が活躍しそうですね。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません