【Flutter】基本的なWidgetの構造と使い方

本記事では、アプリ開発においてかなり使用頻度の高いウィジェットのご紹介をします。

　AppBar Widgetの使い方

基本構造

• leading：アイコンボタンウィジェットなどを引数に取り、左端に配置するもの指定します
• title：テキストウィジェットなどを引数に取り、そのページに文字を配置します
• centerTitle：上記の[title]を中央に持ってくるかを、True か Fluseで返します
• action：アイコンボタンウィジェットなどを引数に取り、右端に配置するもの指定します

ユーザーインターフェース

Widget構造

中身は適当ですが、よく使う上記のウィジェットを使って作ってみました。

ソースコード

AppBar(
  leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
  title: Column(
    children: [
      Text('おかねるBlog'),
      Text('スクリーン2',style: TextStyle(
          fontSize: 15, fontWeight: FontWeight.w100
      ),)
    ],
  ),
  centerTitle: true,
  actions: [
  IconButton(icon: Icon(Icons.search), onPressed: () {}),
  IconButton(icon: Icon(Icons.thumb_up), onPressed: () {}),
    IconButton(icon: Icon(Icons.swipe), onPressed: () {}),
],
  elevation: 0,
  backgroundColor: Color.fromRGBO(0,142,151, 1),),

ここで使っているcolumnウィジェットは以下を参考にしてみてください！

Culumn Widgetの使い方

この記事ではColumn Widgetの基本的な使い方を解説します。

　Column Widgetを使うことことで、以下の画像のように複数のWidgetを並べることができます。確実に使う機能なのでぜひ覚えてくださいね。

基本構造

　基本構造は非常にシンプルでchildrenの中に好きなWidgetを並べるだけです。

今回はWidget①、②、③の全てに同じ画像ファイルを入れております。

サンプルコード

Column(
          children: [
            Expanded(child:Container(
                child: Image.asset('images/blog.png') 　//widget①
            )),
            Expanded(child:Container(
                child: Image.asset('images/blog.png')　//widget②
            )),
            Expanded(child:Container(
              child: Image.asset('images/blog.png')　//widget③
            ))
          ],
        ),

今回はchild部分に画像を入れていますが、この部分に好きなwidgetを入れることで縦に表示されます。

Columnウィジェットを使ったら、「ほぼ確実に使うだろ」っていうプロパティを紹介します。

主要なプロパティ

mainAxisAlignment　〜y軸方向の位置を指定〜

mainAxisAlignmentプロパティはy軸方向（上下方向）のどの位置に配置するかを指定します。

ここでは中央とします。

Column(
  mainAxisAlignment: MainAxisAlignment.center,　　//中央
  children: [
    Expanded(child:Container(
        child: Image.asset('images/blog.png')
    )),
    Expanded(child:Container(
        child: Image.asset('images/blog.png')
    )),
    Expanded(child:Container(
      child: Image.asset('images/blog.png')
    ))
  ],
)

crossAxisAlignment　〜x軸方向の位置を指定〜

mainAxisAlignmentプロパティはx軸方向（左右方向）のどの位置に配置するかを指定します。

ここでは真ん中とします。

Container(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,  //真ん中
    children: [
      Expanded(
        child: Container(
            child: Image.asset('images/blog.png')
        ),
      ),
      Expanded(child:Container(
          child: Image.asset('images/blog.png')
      )),
      Expanded(child:Container(
        child: Image.asset('images/blog.png')
      ))
    ],
  ),
)

ListTile Widgetの使い方

　ユーザーインターフェースを綺麗に見せるListTileウィジェットの使い方を解説します。

　リスト構造のユーザーインターフェースを実装する際に、普通にListやContainerを使っても良いのですが、List Tileを使うことで、共通のパラメータを使用してそこに値を渡すだけで実装することができます。

　ListTileウィジェットを使用する場合には、ほぼ設定することになるプロパティ一覧をご紹介します。この辺を網羅しておけば、とりあえずは困らないかと思います。

基本構造

• title：引数にTextウィジェットを取り、表示する文字などを指定します
• leading：titleの左側（先頭）に表示されるコンテンツを指定します。アイコンや画像などの場合が多いです。
• trailing：titleの右側（最後）に表示されるコンテンツを指定します。アイコンや画像などの場合が多いです。
• subtitle：titleの下に表示される追加コンテンツを指定します。薄色文字で情報を補足する場合などに使用されます。
• contentPadding：枠の内側の余白を指定します。
• tileColor：ListTileの色（背景色）を指定します。

ユーザーインターフェース

アーキテクチャー

ソースコード

ListTile(
  contentPadding: EdgeInsets.all(10),
  leading: Container(
    child: Image.asset('images/blog.png'),
  ),
  title: Text('おかねるBlog1'),
  tileColor: Colors.grey[300],
  subtitle: Text('ListTile1'),
  trailing: Icon(Icons.more_vert),
),

ついでにCardウィジェット

　ListTitleウィジェットだけでも、リスト構造でアイテムを表示するという機能としては問題ないと思います。だけどもっと美しいユーザーインターフェースにしましょう（笑）

　モバイルアプリは見た目重要ですからね！

実装は非常に簡単でListTileの親クラスにCardを設定し、プロパティにmaginを設定するだけです。

アーキテクチャー

ユーザーインターフェース

　下2つのアイテムはCardウィジェットでmarginが設定されいます。細かいところですが綺麗ですよね。

ソースコード（Cardウィジェット部分)

Card(
  margin: EdgeInsets.all(10),
  child: ListTile(
    contentPadding: EdgeInsets.all(10),
    leading: Container(
      child: Image.asset('images/blog.png'),
    ),
    title: Text('おかねるBlog3'),
    tileColor: Colors.grey[200],
    subtitle: Text('ListTile + Card'),
    trailing: Icon(Icons.more_vert),
    onTap: (){
      print('ontap');
    },
  ),
),

【Flutter】Wrapウィジェットの使い方

　次は、Wrapウィジェットの使い方を解説します。

モバイルアプリ開発をしたことが方にとっては馴染みのない概念かもしれませんが、一言でいうと画面からはみ出した時に自動的に折り返して、次の行、または列に折り返して改行・改列してくれる機能です。

Wrapなしで画像配置（NG例）

　Wrapを理解するためにまずはRowウィジェット(Wrapなし)で画像を7枚配置した際の画面を見ていきましょう。Rowウィジェット配下に画像を配置しました。

下記ユーザーインターフェースを見るとDenger柄が表示されて画像がはみ出していることがわかります。

Wrapウィジェットで折り返えす

対策はいくつかありますが、本記事ではWrapウィジェットを使って画像を折り返すことでエラーに対応します。まずは7枚の画像を配置してみます。Wrapウィジェットを使うことで以下のように画面からはみ出さずに画像を表示することができます。

アーキテクチャー

ユーザーインターフェース

ソースコード

　＊画像7枚のうち、3枚分だけを表示

Wrap(
  direction: Axis.horizontal,
    spacing: 10,
    runSpacing: 10,
    children: [
      Container(
          child: Image.asset('images/1.jpg'),
        width: 100,
        height: 100,
      ),
      Container(
          child: Image.asset('images/blog.png'),
        width: 100,
        height: 100,
      ),
      Container(
          child: Image.asset('images/2.jpg'),
        width: 100,
        height: 100,
      ),
    ],
),

プロパティ一覧

• direction：引数にAxis.verticalでcolumn風、Axis.horizontalでrow風に見せることができます。
• spacing：アイテム（今回は画像）間の横方向(x軸方向)の間隔を指定します。
• runSpacing：アイテム（今回は画像）間の縦方向(y軸方向)の間隔を指定します。