100日後にFlutter生活：5日目②：画面遷移をやってみる
Flutter モバイルアプリ開発バイブル という本を見ながら、画面遷移のサンプルコードを実装してみた。
ここまでで、単一画面を作って、画面にボタンを置いて、押されたらテキストを変える。くらいは出来るようになっていたので、それを応用して遷移ロジックを追加するのは、理解しやすかった。
遷移元、遷移先で値の受け渡しもできたし。 （一部、理解できてないコードがあるけど）
じわじわと理解が広がってきて嬉しい。
まだ、自由にレイアウト出来るレベルではないので、そのあたりはもう少し頑張りたい。
というか眠すぎるので寝ます。
100日後にFlutter生活：5日目①：これまでの振り返り
これまで勉強した内容を頭で整理して、ババっと超簡単なアプリは書けるようになった。
- ボタン１個、テキスト１個
- ボタンを押したら、カウントアップした数字をテキストに表示
- ボタン押したイベント、ステータス管理（カウンタ）、ステータスを表示（テキストに表示）
- マテリアルデザイン
ちょっと書けるようになったかも。と思えるレベル感としては
- プログラムを書くときに、アウトラインがイメージできてる。 「main メソッド書いて、StatefulWidgetとStateのクラス作って、ステータス管理とボタン押したイベントは、同じクラス内で書けばOKなんだな」みたいな。
- クラス定義とメソッド宣言は、ほぼ本を見ないで書ける。
- でも細かい部分やレイアウト調整方法など、Widgetを使いこなす引き出しは、まだまだ。本を見ないと分からないレベル。
かなと思う。
本を見ないで６割くらい書けて、細かいところは「あれー？どうやって書くんだっけ？本見ようっと」みたいな感覚が持てれば 「ちょっと書けるようになってきたな。よしよし」と思えるってことだな。
そして、この感覚を身につけるには、自分的には、簡単なコードを繰り返し写経するのが なんだかんだで、一番早いような気がする。
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget{ @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp>{ int _counter = 0; @override Widget build(BuildContext context) => MaterialApp( theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar(title: Text('appBarだよ')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ FlatButton( child: Text('PUSH ME!'), onPressed: () => { setState((){ _counter ++; }) }, ), Text('$_counter') ], ) ) ) ); }
100日後にFlutter生活：3日目：電卓の写経おわり
昨日からの続きで、Flutterで電卓を作ってみました。 とりあえず動いた。
良いサンプルでした！ 元記事のかた、ありがとうございました〜。
ソースコード的に気になるところもあったけど、やっぱり手を動かすと、写経でも頭に入ってきていいな。 眠いので、簡単にメモ…
■良かった点 * Classが細かく別れたサンプルだったので、Dart の書き方や、ソースの分割方法が、なんとなく分かった。 * 配列や分岐などの基本構文も理解できた。 * 非同期ライブラリの簡単な使い方が分かった。
■今後、理解を深めたい点 * ボタンのイベントと計算処理をリンクさせるため、いろんなものが static になっているが別の実装方法がありそう。 * 文字列と数値操作とか、ロジックの細かい部分を書き換えてみたい。
明日は、画面遷移を作ってみたいな。 良いサンプルが見つかるといいけど…
100日後にFlutter生活：2日目：電卓を写経する
画面上でイベントを拾えたなら、改めて、簡単なアプリを作って 入力、出力、レイアウトをやってみる。
よくやるのは、電卓作成。 いい感じの記事を見つけたので、このサイトのコードを写経させてもらおうっと。
・・・３０分後
んー、コンパイルエラーぽいものが出てしまった。 調べたい！直したい！
しかし・・・眠すぎる！
ねよ・・・・
100日後にFlutter生活：1日目：タップイベントを作る
某100日後に〜から、タイトルアイデアを拝借してみました。
改めて「100日後」って良い設定だなぁ。 ３ヶ月、何かを毎日できれば、きっとどこかにたどり着けるはず。
１日１０分でも継続してみよう。（と、今日は全然時間がとれないことを、前向きに言い訳しておくｗ）
Flutter 再開の初日は、タップイベントの制御をやってみます。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( title: 'Hello World', home: Scaffold( appBar: AppBar( backgroundColor: Colors.white, ), body: FlatButton( child: Text("クリックしてみそ"), onPressed: (){ print("クリックされた！?"); } ), ), ); } }
ボタンをクリックしたら、デバッグコンソールにテキストが表示される！
まずは、ここから。
参考にしたサイト：
Flutter動画やってみよ(eBook)４
以下のYoutubeの動画を、実際になぞっていきます。
前回は、こちら。
Flutter動画やってみよ(eBook)３ - もっぺんプログラミング(´・ω・｀)
ベスト商品の掲載枠の追加
今日のベスト商品（Best of the day）を表示するエリアを追加していきます。
先程のSingleChildScrollView （商品を横スクロールさせていたWidget）の下に追加していきます。
), // ← SingleChildScrollViewの閉じカッコ Padding( padding: EdgeInsets.symmetric(horizontal: 24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ RichText( text: TextSpan( style: Theme.of(context).textTheme.display1, children: [ TextSpan(text: "Best of the "), TextSpan( text: "day", style: TextStyle(fontWeight: FontWeight.bold), ), ], ), ), Container( margin: EdgeInsets.symmetric(vertical: 20), width: double.infinity, height: 205, child: Stack( children: <Widget>[ Positioned( bottom: 0, left: 0, child: Container( height: 185, width: double.infinity, decoration: BoxDecoration( color: Color(0xFFEAEAEA).withOpacity(.45), borderRadius: BorderRadius.circular(29), ), ), ), Positioned( right: 0, top: 0, child: Image.asset("assets/images/book-3.png"), width: size.width * .37, ), ], ), ), ], ) )
これで、こんな感じのエリアが追加されます。
(Best of the day からのエリア）
上下段レイアウトのために、Columnを追加しています。
タイトルはRichTextで表現し、本の画像を置いているグレーのエリアは、Containerを使っています。
このコンテナ内に、本の説明文・お気に入りボタン・評価を追加していきます。
まず、テキストの表示箇所をコンテナの少し内側になるように、コンテナ内にPaddingをセットします。
child: Container( padding: EdgeInsets.only( left: 24, top: 24, right: size.width * .35, ),
次に、コンテナのBoxDecoration の閉じタグ以降に以下を追加します。
), // ← BoxDecoration の閉じタグ child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( "New York Time Best For 11th March 2020", style: TextStyle( fontSize: 9, color: kLightBlackColor, ), ), SizedBox(height: 5), Text( "How To Win \nFriends & Influence", //style: Theme.of(context).textTheme.title, // ← ビデオのコードはDuplicatedだったため、書き直しました。 style: TextStyle( fontSize: 16, fontWeight: FontWeight.bold, ), Text( "Gary Venchuk", style: TextStyle(color: kLightBlackColor), ), SizedBox(height: 10), Row( children: <Widget>[], ) ], )
テキストの下にレーティングを追加します。
レーティングは、BookRating としてWigetに切り出しているので、それを使います。
説明テキストも合わせて以下のようなコードです。
Row( children: <Widget>[ BookRating(score: 4.8), // ← BookRatingを追加 SizedBox(width: 10), Expanded( child: Text( "When the earth was flat and everyone wanted to win the game of the best and people…", maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle( fontSize: 10, color: kLightBlackColor, ) ) ) ], )
こんな感じになりました。
最後に、”Read”ボタンを追加します。
Positioned( right: 0, top: 0, child: Image.asset("assets/images/book-3.png"), width: size.width * .37, ), Positioned( // ← ボタン追加 bottom: 0, right: 0, child: SizedBox( height: 40, width: size.width * .3, child: TwoSideRoundedButton( text: "Read", radious: 24, press: () {}, ) ) )
最後に、コードの読みやすさのために Container を別メソッドに切り出します。
動画だと、ショートカットから「Extract Method」を選択して実行しています。
が、、、これが自分の環境だと出てこず…
手動で、メソッドに変換しました。
↓以下のような感じです。
), // ← RichText の閉じタグ bestOfTheDayCard(size, context), // ← もともと、Containerを記載していた箇所。 ], ), ), ], ), ), ); } } // ↓ 切り出したメソッド。return の後ろに、Container のコードを貼り付けます。 Container bestOfTheDayCard(Size size, BuildContext context) { return Container(
次に、この下にオススメ欄を追加していきます。
つづきます。
