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時間以内に行う。

貴重なお時間お読みくださいまして、誠にありがとうございます。