簡易ロードマップ

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

今後の予定

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

RyRy

条件に応じて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

StatelessWidget と StatefulWidget

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

RyRy

border-solid的概念

RyRy

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に設定
       ),
     ),
   );
 }