- Rowウィジェットを使用する方法: Rowウィジェットは、子ウィジェットを水平に配置するために使用されます。子ウィジェットのリストを定義し、Rowウィジェットに渡すことで、水平方向にウィジェットを拡張することができます。
Row(
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
],
)
- ListViewウィジェットを使用する方法: ListViewウィジェットは、スクロール可能なリストを作成するために使用されます。水平方向にスクロール可能なリストを作成するには、ListView.builderメソッドを使用し、水平方向に拡張するウィジェットを定義します。
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
height: 100,
color: Colors.purple,
margin: EdgeInsets.all(8),
);
},
)
- Expandedウィジェットを使用する方法: Expandedウィジェットは、親ウィジェットの利用可能なスペースを均等に分配するために使用されます。水平方向にウィジェットを均等に拡張するには、ExpandedウィジェットをRowウィジェット内に配置します。
Row(
children: [
Expanded(
child: Container(
height: 100,
color: Colors.orange,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.yellow,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.pink,
),
),
],
)
これらは、水平方向にウィジェットを拡張するためのいくつかの一般的な方法です。それぞれのコード例を使用して、自分のアプリケーションに適した方法を選択してください。