簡易ロードマップ

入門書を読みながらハンズオンを実行
(ハンズオンは実行済み)
何かある場合は逆引き的にこちらを読み返すOR別途調べる
自分でアプリを0から作る。

今後の予定

Flutterを使っていてここは個人的に覚えておきたいと思った内容を簡易的にメモでつなげていく

RyRy 17日前

条件に応じてWidgetを切り替える

child内部のIf文は基本的に使えない

ただ、こういう機能もある

入門用のアプリに手を加える

検索結果が見つからない場合はテキスト、見つかったらListViewという感じ
三項演算子を使用する

最初はテキストを出さないようにしたい。調査中

// 検索結果が空じゃないならListView、逆はテキスト
child: articles.isNotEmpty
               ? ListView(
                   children: articles
                       .map((article) => ArticleContainer(article: article))
                       .toList(),
                 )
               : Text('記事がひとつもありませんでしたよ', // TODO 最初はからにしたいかも
                   style: TextStyle(
                     // ← TextStyleを渡す
                     fontSize: 18,
                     color: Colors.black,
                   )),

RyRy 17日前

StatelessWidget と StatefulWidget

ユーザー操作が必要な時はStatefulの認識くらいでいる。また調べるかも

RyRy 13日前

border-solid的概念

RyRy 12日前

Widgetはメソッド管理できるので、ネストを避けるために適宣使っていきたい
例は横並びのボタン

child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
           goodButton(),
           supportButton(),
           entryButton(),
         ],
       ),

メソッド側

ElevatedButton supportButton() {
   return ElevatedButton.icon(
     onPressed: () {},
     icon: const Icon(Icons.support, color: Colors.pink),
     label: const Text(
       '応援',
       style: TextStyle(fontSize: 11, color: Colors.black),
     ),
   );
 }

 ElevatedButton entryButton() {
   return ElevatedButton.icon(
     onPressed: () {},
     icon: const Icon(Icons.arrow_right),
     label: const Text(
       'Entry',
       style: TextStyle(fontSize: 11, color: Colors.black),
     ),
     // ボタンの色をCyanに設定する
     style: ElevatedButton.styleFrom(
       backgroundColor: Colors.cyan, // ボタンの背景色を指定
     ),
   );
 }

 Padding bottomSideContactButton() {
   return Padding(
     padding: const EdgeInsets.all(18),
     child: ElevatedButton.icon(
       onPressed: () {
         // ボタンが押されたときの処理
       },
       icon: const Icon(Icons.arrow_right),
       label: const Text(
         'まずは話を聞きにいく',
         style: TextStyle(fontSize: 11, color: Colors.black),
       ),
       // ボタンの色設定
       style: ElevatedButton.styleFrom(
         backgroundColor: Colors.cyan, // 背景色をCyanに設定
       ),
     ),
   );
 }

RyRy 7日前に更新

アプリを作成してみました。

自作のAPIをラッピングしたクライアントです。Chrome環境での挙動のみ確認です。
まず、適当に画面案を絵に書いた後、実装に落とし込む形で実現しました。
基礎的なところは入門書を参考にしてます。

絵

イメージがつかめればいいので適当です。

実際の挙動

表示してるデータ、募集に対する操作ボタンはダミーです。
画面レイアウトはiPhone XRのものになります。

リポジトリ

今後の予定

Widgetのメソッド管理を徹底して過度なネストを避けたコードにリファクタ
Dartのリーダブルな書き方を調べて適用
思いついた機能を追加(ダミーオススメ通知とか)
riverpodのキャッチアップ

RyRy 12日前

route 参考