Flutter_Study
今日はEveryDaySoft代表の永田です。
目的:Flutterの学習方法を作成したいと思いました。
環境 : 複数環境で見たいので、wordpress上でオープンにすることにしました。
方法 : コード実装を進める中でポイントになりそうな箇所を追記しています。
Alignとは座標指定でwidgetを配置できます。 Align( alignment: Alignment.center, child: Text(), ),
AppBarとはAndroidでよく使われるアプリバー・アクションバーです。iOSではナビゲーションバーです。
ContainerはStatelessWidgetのサブクラスで要素を入れる箱のようなものです。HTMLでいうdivです。
bodyはメインとなる画面です。bodyの要素の中にchildなどが入ります。 body: Container( child: Column( ), ),
Columnとは要素を縦に並べます。 child: Column( children: <Widget>[ ], GridView.count( ), ),
Rowとは要素を横に並べます。 child: Row( children: <Widget>[ Text("1"), Text("2"), ], ),
Childとは単一のウィジットです。 child: Text("") などで設定します。
Childrenとは複数のウィジットです。 children: <Widget>[Text("-"), Text("-")]
viewport was given unbounded heightの発生した場合のエラー 追記(GridView or ListView)など shrinkWrap: true, physics: NeverScrollableScrollPhysics()
AppBarのカラー設定は、backgroundColor Containerのカラー設定は、color
AppBarのページ遷移の戻る処理の非表示の仕方 automaticallyImplyLeading
イニシャライザの実装の仕方 class クラス名 extends StatelessWidget { クラス名(this.count); int count; 呼び出し方法 クラス名(~)
SingleChildScrollViewとは 動的にスクロール表示ができるウィジェットです。
角丸の調整 decoration: new BoxDecoration( borderRadius: BorderRadius.only( topRight: Radius.circular(~), topLeft: Radius.circular(~)) ),
Containerの余白を設定する方法は、 margin: EdgeInsets.all(~~), margin: EdgeInsets.only(left: ~~, right: ~~),
三項演算子 この場合は奇数、偶数判定 (index % 2 == 0) ? Colors.~ : Colors.~
要素を複数設定 child: Row( // mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("123"), Text("345"), ], ),
Scaffoldのカラー設定は、 backgroundColor: ~~~
Paddingは余白をつけるときに使用 Padding( padding: const EdgeInsets.only(left: ~), )
画面遷移の方法 onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => クラス名()); },
Flexibleとは同じ階層に実装する場合 Flexible( children: <Widget>[ ListTile( title: Text(""), ), Flexible( child: Text(""), ), ], )
FutureBuilderとはBuildContext内の非同期でデータを取得できます。 body: Center( child: FutureBuilder( future: 非同期メソッド, builder: (BuildContext context, AsyncSnapshot<String> snapshot) { if (snapshot.data) { return Text(snapshot.data); } else { return Text("データが存在しません"); } }, ), ),
Flexible内の文字に改行をつける場合はWrapを使用 child: Wrap( children: <Widget>[ Text("Example"), Text( "Example", maxLines: null, ) ], ),
ListViewで横に設定する場合 child: ListView.builder( scrollDirection: Axis.horizontal,
引数をnull設定する方法 String randomString(int length, {int? length2, int? length3}) { return length.toString(); }
結論: インプットとアウトプットをなるべく24時間以内に行う。
貴重なお時間お読みくださいまして、誠にありがとうございます。
1件の返信
I was excited to discover this website. I want to to thank you for your time for this wonderful read!! I definitely liked every part of it and i also have you book-marked to look at new things on your website.