Dartでの様々なWidgetのサンプル
公開日: 2024-07-15 13:07:19
更新日: 2024-07-15 13:11:12
今回はDartでの様々なWidgetのレイアウトサンプル。
・ContainerWidget(単一View)
・RowWidget (Viewを横に並べて配置)
・StackWidget (Viewを重ねて配置)
・ListViewWidget (leading：Title：SubTitle：trailingのような形式で表示)
こちらを書いてみたので、深掘りしていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutterのレイアウトサンプル'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
// ■■■Containerウィジェット
Column(
children: [
Text('Containerサンプル', style: TextStyle(color: Colors.red)),
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8.0),
),
child: Text('Hello, Container!'),
),
Divider(color: Colors.black),
],
),
// ■■■Rowウィジェット
Column(
children: [
Text('Rowのサンプル', style: TextStyle(color: Colors.red)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star),
Icon(Icons.star_border),
Icon(Icons.star_half),
],
),
Divider(color: Colors.black),
],
),
// ■■■Stackウィジェット
Column(
children: [
Text('Stackのサンプル', style: TextStyle(color: Colors.red)),
Stack(
children: <Widget>[
Container(
// 1つ目の要素
width: 100,
height: 100,
color: Colors.red,
),
Positioned(
// 2つ目の要素(1つ目の要素の小要素として配置)
left: 20,
top: 20,
child: Stack(
children: [
Container(
width: 50,
height: 50,
color: Colors.blue,
),
Positioned(
// 3つ目の要素(2つ目の要素の小要素として配置)
left: 0,
top: 0,
child: Container(
width: 30,
height: 30,
color: const Color.fromARGB(255, 2, 3, 4),
),
),
],
),
),
],
),
Divider(color: Colors.black),
],
),
// ■■■ListViewウィジェット
Expanded(
child: Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.map), // リスト項目の先頭に表示するアイコン
title: Text('Map'), // 主なテキストを表示するウィジェット
subtitle: Text(
'サブタイトルに入力したTextを表示。isThreeLine: trueだと複数行表示が可能になる',
), // タイトルの下に表示される補足的なテキストウィジェット
trailing: Icon(Icons.more_vert), // リスト項目の末尾に表示するアイコン
isThreeLine: true, // タイトル、サブタイトルに加えて3行目のテキストを表示可能にする
dense: true, // コンパクトなレイアウトを使用する
contentPadding: EdgeInsets.symmetric(
horizontal: 16.0), // コンテンツの左右のパディングを設定
enabled: true, // タップ可能にする
onTap: () {
print('Map ListTile tapped'); // タップ時に呼び出されるコールバック
},
onLongPress: () {
print('Map ListTile long pressed'); // 長押し時に呼び出されるコールバック
},
),
ListTile(
leading: Icon(Icons.photo),
title: Text('Photo'),
subtitle: Text('Subtitle text'),
trailing: Icon(Icons.more_vert),
isThreeLine: false,
dense: false,
contentPadding: EdgeInsets.symmetric(horizontal: 16.0),
enabled: true,
onTap: () {
print('Photo ListTile tapped');
},
onLongPress: () {
print('Photo ListTile long pressed');
},
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
subtitle: Text('Subtitle text'),
trailing: Icon(Icons.more_vert),
isThreeLine: true,
dense: false,
contentPadding: EdgeInsets.symmetric(horizontal: 16.0),
enabled: true,
onTap: () {
print('Phone ListTile tapped');
},
onLongPress: () {
print('Phone ListTile long pressed');
},
),
],
),
),
],
),
),
);
}
}
実行結果
今回はWidgetの配置について学びました。
FlutterにおけるWidgetはオブジェクト指向のObjectにあたるもので、ButtonもTextFieldもWigdetとなります。
このWidgetの集合体がViewとなります。