BETA

Flutterの公式ドキュメントのメモ 〜Building layouts〜

投稿日:2020-05-23
最終更新:2020-05-23

公式ドキュメント

https://flutter.dev/docs/development/ui/layout

Layouts in Flutter

What's the point?

  • WidgetはUIの構築に使われるクラスである
  • WidgetはレイアウトとUI要素の両方に使われる
  • 単純たWidgetを組み合わせて、複雑なWidgetを作る
  • Flutterのレイアウトの仕組みのコアはWidgetである
  • Flutterでは、レイアウトモデルを含むほぼすべてがWidgetである
  • 画像、アイコン、テキストなどFlutterアプリで見えるものはすべてWidgetである
  • しかし、見えないものもWidgetだったりする。
  • 例えば、RowColumn、見えるWidgetを整列したりするGridなどである
  • より複雑なWidgetを作るために、Widgetを組み合わせてレイアウトを作る
  • 例えば以下のスクショは、それぞれのしたにラベルを持つ3つのアイコンを示している。
  • 以下のスクショは、視覚化されたレイアウトを示していて、それぞれにアイコンとラベルを含む3つのColumnのRowを示している。

    Note: このチュートリアルで表示されているスクショは、レイアウトが見えるようにdebugPaintSizeEnabledtrueに設定されている。詳細はこちらを参照せよ。

  • Widgetツリーは以下のようになっている。

  • これらのほとんどについては期待通りに見えるが、Container(ピンクの部分)に関しては疑問に思うだろう
  • Containerはその子WidgetをカスタマイズできるようにするWidgetクラスである。
  • PaddingやMargin、BorderやBackground Colorを追加したいときはContainerを使う
  • この例では、各Textwidgetはマージンを追加するためにContainerに配置されている。
  • Row全体も、Rowの周りにPaddingをつけるためにContainerに配置している。
  • この例の残りのUIは、プロパティによって制御されている
  • colorプロパティを使って、Iconの色をセットしている
  • フォントや色、太さなどをセットするためには、Text.styleプロパティを使う
  • ColumnRowは、以下のようなプロパティを持っている
    • 子Widgetsを垂直か水平のどちらに並べるかを指定する
    • 子Widgetsがどの程度のスペースを占有するか指定する

Lay out a widget

  • このセクションでは、単純なWidgetの作り方と表示のしかたを示す
  • あと、シンプルなHello worldアプリのコードも示す

1. Select a layout widget

  • 見えるWidgetをどう並べたいかに基づいて、Layout widgetsから選ぶ。
  • Layout Widgetsの特性は、たいてい含まれるWidgetにも渡される。

    Layout widgetsには、上述したRowとかColumnPaddingの他に、Centerや、ListViewTableなど様々な種類のWidgetが用意されている。

2. Create a visible widget

Text widget

Text("Hello, world"),  

Image widget

Image.asset(  
  'images/lake.jpg',  
  fit: BoxFit.cover,  
),  

Icon widget

Icon(  
  Icons.star,  
  color: Colors.red[500],  
),  

3. Add the visible widget to the layout widget

  • すべてのLayout widgetsは、以下のいずれかを持っている
    • 単一の子を持つ場合(例えばCenterContainer)、childプロパティを持つ
    • 子にWidgetのリストを持つ場合(例えばRow,Column,ListView,Stack)は、childrenプロパティを持つ
  • TextwidgetをCenterに入れる場合、こうなる。
Center(  
  child: Text('Hello World'),  
),  

4. Add the layout widget to the page

  • Flutterアプリは、それ自体がWidgetであり、ほとんどのWidgetはbuild()関数を持っている
  • アプリのbuild()関数でWidgetをインスタンス化し返すと、Widgetが表示される

    Material app

  • Materialアプリのためには、Scaffoldwidgetを使うことができる。
  • それは、デフォルトのバナーや背景色を提供し、ドロワーやスナックバー、ボトムシートを追加するためのAPIを持っている
  • Centerwidgetはbodyプロパティに直接加えることができる
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Flutter layout demo',  
      home: Scaffold(  
        appBar: AppBar(  
          title: Text('Flutter layout demo'),  
        ),  
        body: Center(  
          child: Text('Hello World'),  
        ),  
      ),  
    );  
  }  
}  

Note: Material libraryはMaterial designに沿ったwidgetsを実装している。UIを設計したいときは、標準のWidgets libraryを使用することができるし、Material libraryを使っても良い。混ぜて使うこともできるし、既存のWidgetをカスタマイズすることもできるし、あるいは、カスタムWidgetのセットを構築することもできる

Non-Material apps

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      decoration: BoxDecoration(color: Colors.white),  
      child: Center(  
        child: Text(  
          'Hello World',  
          textDirection: TextDirection.ltr,  
          style: TextStyle(  
            fontSize: 32,  
            color: Colors.black87,  
          ),  
        ),  
      ),  
    );  
  }  
}  
  • デフォルトで、MaterialでないアプリはAppBarやtitle, background colorを含んでいない
  • 非マテリアルアプリにこれらを入れたい場合は、自分で作る必要がある
  • 上記のアプリでは、Materialアプリっぽくするために、背景色を白に、テキストをダークグレーに変えている

Lay out multipe widgets vertically and horizontally

  • 最も一般的なレイアウトパターンの一つは、Widgetsを垂直または水平に並べるものである
  • 水平の並べたい場合はRow、垂直に並べたい場合はColumnを使うことができる

    What's the point?

    • RowColumnは最もよく使われるレイアウトパターンの2つ
    • RowColumnはどちらも子widgetsのリストを受け取る
    • 子widgetは、RowColumn、またはそれ以外の複雑なWidgetを指定できる
    • 特定の子Widgetを伸ばしたり、制限したりできる
    • 子WidgetsがRowColumnの利用可能な領域をどの程度使うかを指定できる
  • Flutterで行や列を作るには、RowまたはColumnwidgetに子widgetsのリストを加える

  • 各子widgetは、行や列などになることができる
  • 以下の例は、RowColumnの中にどうネストできるのかを示している
  • このレイアウトは、Rowで構成されている。
  • Rowは2つの子を含んでいる。左のColumnと、右の画像である。
  • 左の列のWidgetツリーは、RowColumnをネストしている
  • コードはこちら

    Note: RowColumnは水平・垂直なレイアウトの基本的なプリミティブWidgetであり、これらの低レベルなWidgetで最大限のカスタマイズが可能になる。Flutterは特別な高レベルのWidgetも提供している。例えば、Rowの代わりにListTileを使うと、leading, trailingアイコンや3行までのテキストを持った使いやすいWidgetがある。Columnの代わりに、コンテンツが長すぎてスペースに収まらない場合に自動的にスクロールする列のようなレイアウトListViewを選択できる。詳細はこちら

Aligning widgets

  • mainAxisAlignmentプロパティとcrossAxisAlignmentプロパティを使うことで子Widgetsをどう整列させるかをコントロールできる
  • 行では、main axisは水平に、cross axisは垂直に走っている
  • 列では、main axisは垂直に、cross axisは水平に走っている

  • MainAxisAlignmentクラスとCrossAxisAlignmentクラスは配置をコントロールするための様々な制約を提供している

    Note: 画像を追加したい場合は、それらにアクセスするためにpubspec.yamlファイルを更新する必要がある。より詳しい情報は、この例のpubspec.yamlか、Adding assets and imagesを参照してね。Image.networkでオンラインの画像を参照しているときは必要ない。

  • 以下の例では、3つの画像それぞれは100pxの幅である

  • レンダーボックス(この場合スクリーン全体)は300pxより広いため、main axisの配置をspaceEvenlyに設定すると、各画像の間と前後が均等になるように水平の空間が分割された

    Row(  
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
    children: [  
      Image.asset('images/pic1.jpg'),  
      Image.asset('images/pic2.jpg'),  
      Image.asset('images/pic3.jpg'),  
    ],  
    );  
  • ColumnRowと同様に動作する

  • 以下の例は、それぞれ高さが100pxの3つの画像の列を示している
  • レンダーボックスの高さは300pxより高いため、main axisの配置をspaceEvenlyに設定すると、各画像の間隔と上下が均等になるように垂直のスペースが分割される
    Column(  
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
    children: [  
     Image.asset('images/pic1.jpg'),  
     Image.asset('images/pic2.jpg'),  
     Image.asset('images/pic3.jpg'),  
    ],  
    );  

Sizing widgets

  • レイアウトが大きすぎてデバイスに収まらないときは、影響を受けている端に沿って黄色と黒の縞模様が表示される
  • Expandedwidgetを使うことによって、Widgetを行や列の中に収まるようにサイジングすることができる
  • レンダーボックスに対して広すぎる画像の行の上記の例をフィットさせるには、各画像をExpandedでラップする必要がある

    Row(  
    crossAxisAlignment: CrossAxisAlignment.center,  
    children: [  
      Expanded(  
        child: Image.asset('images/pic1.jpg'),  
      ),  
      Expanded(  
        child: Image.asset('images/pic2.jpg'),  
      ),  
      Expanded(  
        child: Image.asset('images/pic3.jpg'),  
      ),  
    ],  
    );  

  • ある1つのWidgetが、その兄弟widgetの2倍のスペースを占めるようにしたい場合を考える

  • これに対しては、Expandedwidgetのflexプロパティを使う。
  • flexプロパティは、Widgetのフレックス係数を決める整数で、デフォルトは1である
  • 以下の例は、真ん中の画像のフレックス係数を2にした例である。
    Row(  
    crossAxisAlignment: CrossAxisAlignment.center,  
    children: [  
      Expanded(  
        child: Image.asset('images/pic1.jpg'),  
      ),  
      Expanded(  
        flex: 2,  
        child: Image.asset('images/pic2.jpg'),  
      ),  
      Expanded(  
        child: Image.asset('images/pic3.jpg'),  
      ),  
    ],  
    );  

Packing widgets

  • デフォルトでは、行や列はmain axisに沿って可能な限りのスペースを占めるが、子widgetsを密に詰めたい場合は、mainAxisSizeMainAxisSize.minにセットする。
  • 以下の例は、このプロパティを使ってスターアイコンを密に詰めた例である。
    Row(  
    mainAxisSize: MainAxisSize.min,  
    children: [  
      Icon(Icons.star, color: Colors.green[500]),  
      Icon(Icons.star, color: Colors.green[500]),  
      Icon(Icons.star, color: Colors.green[500]),  
      Icon(Icons.star, color: Colors.black),  
      Icon(Icons.star, color: Colors.black),  
    ],  
    )  

Nesting rows and columns

  • レイアウトフレームワークを使うと、行と列の中に行や列を必要なだけ深くネストすることができる
  • 以下のレイアウトの囲まれた部分を見よ
  • 囲まれた部分は、2つの行で実装されている。
  • レーティングの行は、5つの星とレビューの数を含んでいる。
  • アイコンの行は、アイコンとテキストの3つの列を含んでいる。
  • レーティングの行のWidgetツリーは、以下の通りである。
  • ratings変数は、5つのスターアイコンとテキストの小さい行を作っている。
var stars = Row(  
  mainAxisSize: MainAxisSize.min,  
  children: [  
    Icon(Icons.star, color: Colors.green[500]),  
    Icon(Icons.star, color: Colors.green[500]),  
    Icon(Icons.star, color: Colors.green[500]),  
    Icon(Icons.star, color: Colors.black),  
    Icon(Icons.star, color: Colors.black),  
  ],  
);  

final ratings = Container(  
  padding: EdgeInsets.all(20),  
  child: Row(  
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
    children: [  
      stars,  
      Text(  
        '170 Reviews',  
        style: TextStyle(  
          color: Colors.black,  
          fontWeight: FontWeight.w800,  
          fontFamily: 'Roboto',  
          letterSpacing: 0.5,  
          fontSize: 20,  
        ),  
      ),  
    ],  
  ),  
);  

Tips: 大きくネストされたコードによる視覚的な混乱を最小限にするために、変数や関数にUIの部品を実装する。

  • アイコンの行は3つの列を含んでいて、各列はアイコンと2行のテキストを含んでいる
  • Widgetツリーは以下
  • iconList変数はアイコンの行を定義する
final descTextStyle = TextStyle(  
  color: Colors.black,  
  fontWeight: FontWeight.w800,  
  fontFamily: 'Roboto',  
  letterSpacing: 0.5,  
  fontSize: 18,  
  height: 2,  
);  

// DefaultTextStyle.merge() allows you to create a default text  
// style that is inherited by its child and all subsequent children.  
final iconList = DefaultTextStyle.merge(  
  style: descTextStyle,  
  child: Container(  
    padding: EdgeInsets.all(20),  
    child: Row(  
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
      children: [  
        Column(  
          children: [  
            Icon(Icons.kitchen, color: Colors.green[500]),  
            Text('PREP:'),  
            Text('25 min'),  
          ],  
        ),  
        Column(  
          children: [  
            Icon(Icons.timer, color: Colors.green[500]),  
            Text('COOK:'),  
            Text('1 hr'),  
          ],  
        ),  
        Column(  
          children: [  
            Icon(Icons.restaurant, color: Colors.green[500]),  
            Text('FEEDS:'),  
            Text('4-6'),  
          ],  
        ),  
      ],  
    ),  
  ),  
);  
  • leftColumn変数はレーティングの行とアイコンの行を含んでいる。
    final leftColumn = Container(  
    padding: EdgeInsets.fromLTRB(20, 30, 20, 20),  
    child: Column(  
      children: [  
        titleText,  
        subTitle,  
        ratings,  
        iconList,  
      ],  
    ),  
    );  
  • 左の列は、幅を制限するためにContainerに配置される。
  • 最後に、Cardの中の行全体(左の列と画像を含む)としてUIが構築される
  • Image.network()を使うことでネットから画像を埋め込むことができる
  • しかし、この例ではpubspec fileに追加されプロジェクトに直接保存されている
  • アクセスにはImages.asset()を使っている
  • より詳しい情報はこちら → Adding asset and images
    body: Center(  
    child: Container(  
      margin: EdgeInsets.fromLTRB(0, 40, 0, 30),  
      height: 600,  
      child: Card(  
        child: Row(  
          crossAxisAlignment: CrossAxisAlignment.start,  
          children: [  
            Container(  
              width: 440,  
              child: leftColumn,  
            ),  
            mainImage,  
          ],  
        ),  
      ),  
    ),  
    ),  

    Tips: Pavlovaの例はタブレットのような広いデバイスでは最適に水平に実行される。この例をiOSシミュレーターで実行している場合、Hardware > Deviceメニューから様々なデバイスを選択できる。この例では、iPad Proがおすすめである。向きをランドスケープモードに変えるには、Hardware > Rotateを使う。Window > Scaleでシミュレーター の大きさも変えることができる。

ソース:pavlova

Common layout widgets

  • Flutterには、レイアウトWidgetsの豊富なライブラリがある
  • 以下で紹介するものはいくつかの最もよく使われるWidgetである
  • (紹介する?)目的は、完璧なリストを見せて圧倒するよりも、できるだけ早く実行することである
  • 他の利用可能なWidgetsに関しては、Widget catalogや、API reference docsの検索ボックスを使ってね
  • API docsのWidgetのページには、たいていニーズにより合うかもしれない似たようなWidgetについて紹介されている
  • 以下のWidgetは2つのカテゴリに分けられる
  • widgets libraryの標準的なWidgetと、Material libraryの特別なWidgetである
  • widget libraryはどのアプリでも使えるが、Material components libraryはMaterialアプリでしか使えない

Standard widgets

  • Container: paddingやmarign、borderやbackground color、その他の装飾をwidgetに追加する
  • GridView: Widgetをスクロール可能なグリッドとして配置する
  • ListView: Widgetをスクロール可能なリストとして表示する
  • Stack: 他のwidgetの上に重ねる

Material widgets

  • Card: ドロップシャドウと丸角のボックスに関連する情報を配置する
  • LIstTile: 3行のテキストと任意のleading, trailingを行に並べる

Container

  • 多くのレイアウトでは、Containerを自由に使い、Paddingを使ってWidgetを分離したり、borderやmarignを追加する
  • Containerに全体のレイアウトを配置することでデバイスの背景や背景色、画像を変えることができる

Summary (Container)

  • PaddingやMargin, borderを追加する
  • 背景色や画像を変更する
  • ひとつの子Widgetを持つが、その子はRowColumnやWidgetツリーでも良い

Examples (Container)

  • このレイアウトはそれぞれ2つの画像を含む2つの行の列で構成されている
  • Containerは列の背景色をライトグレーにするのに使われている
    Widget _buildImageColumn() => Container(  
        decoration: BoxDecoration(  
          color: Colors.black26,  
        ),  
        child: Column(  
          children: [  
            _buildImageRow(1),  
            _buildImageRow(3),  
          ],  
        ),  
      );  
  • Containerは、各画像に丸角やMarginをつけるのにも使われている
Widget _buildDecoratedImage(int imageIndex) => Expanded(  
      child: Container(  
        decoration: BoxDecoration(  
          border: Border.all(width: 10, color: Colors.black38),  
          borderRadius: const BorderRadius.all(const Radius.circular(8)),  
        ),  
        margin: const EdgeInsets.all(4),  
        child: Image.asset('images/pic$imageIndex.jpg'),  
      ),  
    );  

Widget _buildImageRow(int imageIndex) => Row(  
      children: [  
        _buildDecoratedImage(imageIndex),  
        _buildDecoratedImage(imageIndex + 1),  
      ],  
    );  

GridView

  • GridViewはWidgetを2次元のリストとして配置するときに使う
  • GridViewは2つの組み立てられたリストを提供する
  • あるいは、独自のグリッドを作成することもできる
  • GridViewがコンテンツがレンダーボックスに対して長いことを検知すると、自動的にスクロールする

Summary (GridView)

  • Widgetをグリッド状に並べる
  • 列のコンテンツがレンダーボックスを超えることを検知すると、自動的にスクロールする
  • 独自のグリッドを作ることもできるし、用意されたグリッドを使うこともできる
    • GridView.countには列の数を指定できる
    • GridView.extentにはタイルの最大ピクセルを指定できる

      Note: セルが占める行と列が重要な2次元のリストを表示する際は(例えば、「アボカド」行に対する「カロリー」列のエントリなど)、TableDataTableを使う

Example (GridView)

  • GridView.extentを使って、グリッドタイルを最大150ピクせルにしている

  • GridView.countを使って、ポートレートモードでは2つのタイルの幅、ランドスケープモードでは3つのタイルの幅にしている
  • タイトルは、各GridTilefooterプロパティを設定して作られている
    Dart code: grid_list_demo.dart @ Flutter Gallery
Widget _buildGrid() => GridView.extent(  
    maxCrossAxisExtent: 150,  
    padding: const EdgeInsets.all(4),  
    mainAxisSpacing: 4,  
    crossAxisSpacing: 4,  
    children: _buildGridTileList(30));  

// The images are saved with names pic0.jpg, pic1.jpg...pic29.jpg.  
// The List.generate() constructor allows an easy way to create  
// a list when objects have a predictable naming pattern.  
List<Container> _buildGridTileList(int count) => List.generate(  
    count, (i) => Container(child: Image.asset('images/pic$i.jpg')));  

ListView

  • ListViewは、列っぽいWidgetで、コンテンツがレンダーボックスに対して大きい場合自動的なスクロールを提供する

Summary (ListView)

  • boxのリストを並べる特別なColumn
  • 水平または垂直に配置できる
  • コンテンツが大きい場合は、自動的にスクロールする
  • Columnより設定できるものは少ないが、簡単に使え、スクロールもサポートしている

Examples (ListView)

Widget _buildList() => ListView(  
      children: [  
        _tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),  
        _tile('The Castro Theater', '429 Castro St', Icons.theaters),  
        _tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),  
        _tile('Roxie Theater', '3117 16th St', Icons.theaters),  
        _tile('United Artists Stonestown Twin', '501 Buckingham Way',  
            Icons.theaters),  
        _tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),  
        Divider(),  
        _tile('Kescaped_code#39;s Kitchen', '757 Monterey Blvd', Icons.restaurant),  
        _tile('Emmyescaped_code#39;s Restaurant', '1923 Ocean Ave', Icons.restaurant),  
        _tile(  
            'Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),  
        _tile('La Ciccia', '291 30th St', Icons.restaurant),  
      ],  
    );  

ListTile _tile(String title, String subtitle, IconData icon) => ListTile(  
      title: Text(title,  
          style: TextStyle(  
            fontWeight: FontWeight.w500,  
            fontSize: 20,  
          )),  
      subtitle: Text(subtitle),  
      leading: Icon(  
        icon,  
        color: Colors.blue[500],  
      ),  
    );  
  • ListViewを使って、ListTileを使ったビジネスのリストを表示している
  • Dividerはレストランとシアターを分離している

ソース: grid_and_list

  • ListViewを使って、Material Design paletteからColorsを表示している

ソース: colors_demo.dart

Stack

  • Stackを使うと、例えば画像とかの基本的なWidgetの上にWidgetを配置できる
  • Widgetは完全にあるいは部分的にベースとなるWidgetに重なる

Summary (Stack)

  • 他のWidgetにWidgetを重ねるのに使う
  • childrenリストの最初のWidgetがベースとなるWidgetであり、後のWidgetはそのベースとなるWidgetの上に重ねられる
  • Stackのコンテンツはスクロールできない
  • レンダーボックスをはみ出る子を切り取ることもできる

Examples (Stack)

  • Stackを使って、CircleAvatarの上にContainer(半透明の黒背景にTextを表示している)を重ねている
  • Stackは、alignmentプロパティとAlignmentを使ってtextをオフセットしている

ソース: card_and_stack

  • Stackを使って画像の上部にグラデーションを重ねている
  • これにより、ツールバーのアイコンがわかりやすくなる

ソース: contacts_demo.dart

Widget _buildStack() => Stack(  
    alignment: const Alignment(0.6, 0.6),  
    children: [  
      CircleAvatar(  
        backgroundImage: AssetImage('images/pic.jpg'),  
        radius: 100,  
      ),  
      Container(  
        decoration: BoxDecoration(  
          color: Colors.black45,  
        ),  
        child: Text(  
          'Mia B',  
          style: TextStyle(  
            fontSize: 20,  
            fontWeight: FontWeight.bold,  
            color: Colors.white,  
          ),  
        ),  
      ),  
    ],  
  );  

Card

  • Material libraryのCardwidgetは、関連した情報の塊を含んでいて、ほぼどのWidgetでも構成できる
  • たいていは、ListTileと一緒に使われる
  • Cardは単一の子widgetを持つが、その子widgetはColumn,Row,Grid、あるいは複数の子widgetを持つことができる他のWidgetでも良い。
  • デフォルトでは、Cardのサイズは0x0ピクセルに縮められる
  • カードのサイズを制限するには、SizedBoxを使うことができる
  • Flutterでは、Cardは少し丸い角やドロップシャドーを持ち、3Dエフェクトを与える
  • Cardelevationプロパティを変更することで、ドロップシャドー効果をコントロールできる
  • 例えば、elevationを24に設定すると、Cardを視覚的に表面から浮き上がらせ、影をより分散させる
  • サポートされているelevationの値については、Material guidelinesElevationを参照

Summary (Card)

  • Material Cardを実現する
  • 関連した情報の塊を表示するのに使う
  • 単一の子Widgetを持ち、それはRowColumn、子Widgetのリストを保持する他のWidgetでも良い
  • 丸い角とドロップシャドウで表示
  • Cardのコンテンツはスクロールできない
  • Material libraryのWidget

Example (Card)

  • Cardは3つのListTileを含み、SizedBoxでそれをラップするように大きさが変わっている
  • Dividerは、1番目と2番目のListTileを分離している

ソース: card_and_stack

  • Cardは画像やテキストを含んでいる

ソース: cards_demo.dart

Widget _buildCard() => SizedBox(  
    height: 210,  
    child: Card(  
      child: Column(  
        children: [  
          ListTile(  
            title: Text('1625 Main Street',  
                style: TextStyle(fontWeight: FontWeight.w500)),  
            subtitle: Text('My City, CA 99984'),  
            leading: Icon(  
              Icons.restaurant_menu,  
              color: Colors.blue[500],  
            ),  
          ),  
          Divider(),  
          ListTile(  
            title: Text('(408) 555-1212',  
                style: TextStyle(fontWeight: FontWeight.w500)),  
            leading: Icon(  
              Icons.contact_phone,  
              color: Colors.blue[500],  
            ),  
          ),  
          ListTile(  
            title: Text('[email protected]'),  
            leading: Icon(  
              Icons.contact_mail,  
              color: Colors.blue[500],  
            ),  
          ),  
        ],  
      ),  
    ),  
  );  

ListTile

  • Material libraryの特別な行widgetであるListTileを使うと、3行のテキストと任意のleading, trainlingアイコンを含む行を簡単に作ることができる
  • ListTileは、CardListViewでよく使われるが、他の場所でも使える

Summary (ListTile)

  • 3行のテキストと任意のアイコンを含む、特別なRowである
  • Rowより設定可能なものは少ないが、より簡単に使える
  • Material libraryのWidget

Examples (ListTile)

  • Cardは3つのListTileを含んでいる

ソース: card_and_stack

  • ListTileを使って、3つのドロップダウンタイプを並べている

Code: buttons_demo.dart

Constraints

  • Flutterのレイアウトシステムを完全に理解するには、Flutterがどのようにしてレイアウトの中で配置やサイジングを行っているかを学習する必要がある
  • より詳しい情報は、Understanding constraintsを見てね
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@popy1017の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう