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

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