Flutterデモアプリをカスタマイズしてみよう③
今回行うこと
今回と次回で画面遷移を行ってみたいと思います
その為にレイアウトを整えつつ、画面遷移を行えるようにしていきます
まずはレイアウトをきれいにする為準備を行なっていきます
準備
まず前回行なった背景色をデフォルトに戻し、テキストの下にボタンを作れるように準備していきます
- bodyのcontainerをCenterに変更
- Colorは削除
- CenterのchildにColumnを追加
- Columnの中にmainAxisSizeを追加します
- mainAxisSizeとはColumnやRowの余分な領域を消してくれます
- Columnに複数Widgetを追加したいのでchildrenに変更
ここまでのコードを確認
body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'ボタンを押した回数は ', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), Text( ' 回', ), ], ),
ボタン配置
Flutterには色々なボタンが用意されていますが
今回は「RaiseButton」という立体的なボタンを作っていきます
上記のコードの下に以下のコード入力していきます
RaisedButton( child: Text('ボタン'), ),
ホットリロード
ボタンが追加されましたが、押しても反応がありません
ここで「onPressed」というプロパティを使います
これはfloatingActionButtonの方にもあります!
記述します
RaisedButton( child: Text('ボタン'), onPressed: (){ }, ),
ボタンのカスタマイズ
ここでは先ほど記述したボタンをカスタマイズしていきます
色
ボタンの色は前回もやったColorで変更していきます
文字の色
文字の色はtextColorで変更します
カウントアップボタンの変更
新たにボタンができましたが
今回作ったボタンをカウントアップのボタンにした方が
分かりやすそうです!
その辺も変更していきます!
floatingActionButtonの方の_incrementCounterをRaisedButtonに持ってきます
RaisedButton( child: Text('ボタン'), color: Colors.blue, textColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), onPressed: _incrementCounter, //追記 ), ] ), ), floatingActionButton: FloatingActionButton( // onPressed: _incrementCounter, //コメントアウト tooltip: 'Increment', child: Icon(Icons.add), ),
遷移ボタンをfloatingActionButtonに変更する
カウントアップボタンの変更が終わったので
floatingActionButtonを遷移する際のボタンとして変更していきます
ここでは分かりやすいようにアイコンで表現してみたいと思います
onPressed
コメントアウトを解除し、中身を空にする
icon
アイコンをarrow_forwardに変更する
tooltip
tooltipは長押した際などに表示されるものなのでここではコメントアウトしておきます
以上のものを記述していきます
floatingActionButton: FloatingActionButton( child: Icon(Icons.arrow_forward), onPressed: () { // tooltip: 'Increment', //コメントアウト }, ),
これで遷移ボタンの準備が出来ました!
まとめ
ここまでで画面遷移までのある程度の準備が出来ましたので
次回画面遷移の続きをやっていきたいと思います。