Flutterは、美しいモバイルアプリを簡単に開発できるフレームワークです。この記事では、Flutter開発の基礎となる一般的なウィジェットをいくつか紹介します。ウィジェットとは、Flutterアプリの基本的なビルディングブロックで、画面上の各要素（テキスト、ボタン、画像など）を表します。
・ウィジェットってどんな種類があるの？
・使い方がよくわからない
こんな疑問に答えます。今回は実際にコードにウィジェットを追加していき、使い方を学んでいきましょう。
・ウィジェットの使い方を理解できる
・実際にコードで使い方を学ぶことができる
実際に下記コードにウィジェットを追加していきます。buildの中にウィジェットを配置していきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp()); // MyAppを起動
}
// StatefulWidgetを継承して、状態が変化するウィジェットを作成
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState(); // 状態を管理するクラスを指定
}
// _MyAppStateクラスで、アプリの状態を管理
// State<MyApp>を継承していることを確認
class _MyAppState extends State<MyApp> {
// @overrideアノテーションを追加して、buildメソッドがStateクラスからオーバーライドされていることを明示
@override
Widget build(BuildContext context) {
// アプリのUIを構築
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Test App'), // アプリのタイトル
),
body: const Center(
child: Text( // Centerウィジェットのchildプロパティを使用してTextウィジェットを配置
'Hello, Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
),
);
}
}
Textウィジェット
Textウィジェットは、画面にテキストを表示するために使用されます。テキストの内容、スタイル、配置などをカスタマイズできます。
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)このコードは、「Hello, Flutter!」というテキストを太字で、フォントサイズ24のスタイルで表示します。エミュレータを起動し、実際に起動します。
このように携帯画面に表示されます。
Containerウィジェット
Containerウィジェットは、子ウィジェットにパディング、マージン、ボーダー、背景色などを適用するために使われます。また、サイズや配置も調整できます。
Container(
padding: EdgeInsets.all(8.0),
color: Colors.blue,
child: Text('Inside a Container'),
)ここでは、テキストを含むコンテナを作成し、8ポイントのパディングを追加して背景色を青に設定しています。実際にHot Reloadするとこのようになります。
ColumnとRowウィジェット
ColumnとRowウィジェットは、それぞれ子ウィジェットを垂直（列）と水平（行）に並べるために使用されます。レイアウト作成の基本です。また、mainAxisAlignmentを設定すると中央に表示されます。
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('First item'),
Text('Second item'),
Text('Third item'),
],
)
このColumnウィジェットは、3つのテキストウィジェットを垂直に並べています。
Imageウィジェット
Imageウィジェットを使用すると、画像を表示できます。画像ソースとして、アセット、ファイル、ネットワークなどが指定できます。
Image.network(
'https://i.imgur.com/372zsV3.jpg',
)この例では、ネットワーク上の画像を表示しています。これをプログラムに追加します。画像が表示され、その下に先ほどのFirst item, Second item~が記載されています。
このように簡単に画像を表示することができます。
ElevatedButtonウィジェット
ElevatedButtonウィジェットは、マテリアルデザインのガイドラインに従ったボタンを作成します。ユーザーがタップしたときのアクションを定義できます。
ElevatedButton(
onPressed: () {
// ボタンが押された時のアクション
},
child: Text('Tap Me'),
)このボタンは、「Tap Me」と表示され、押すと指定したアクションが実行されます。
このように携帯画面にボタンが表示されており、このボタンを押した際のアクションを設定できます。
ウィジェットを理解すれば簡単に携帯のUIを作成することができます。すべてウィジェットで記載できるので便利ですね。今回はボタンを設置しました。次回は関数を定義しボタンを押すとアクションをさせるようにしていきましょう。
念のため最終的なプログラムを載せておきます。このプログラムでRunを押すと起動します。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp()); // MyAppを起動
}
// StatefulWidgetを継承して、状態が変化するウィジェットを作成
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState(); // 状態を管理するクラスを指定
}
// _MyAppStateクラスで、アプリの状態を管理
// State<MyApp>を継承していることを確認
class _MyAppState extends State<MyApp> {
// @overrideアノテーションを追加して、buildメソッドがStateクラスからオーバーライドされていることを明示
@override
Widget build(BuildContext context) {
// アプリのUIを構築
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Test App'), // アプリのタイトル
),
body: Center(
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://i.imgur.com/372zsV3.jpg',
),
ElevatedButton(
onPressed: () {
// ボタンが押された時のアクション
},
child: Text('Tap Me'),
),
const Text('First item'),
const Text('Second item'),
const Text('Third item'),
],
)
),
),
);
}
}Flutterウィジェットの世界へようこそ
これらのウィジェットは、Flutterでアプリを構築する際の基本的な要素です。Flutterのウィジェットは非常に柔軟で、これらの基本的なウィジェットを組み合わせることで、複雑でユニークなUIを作成することができます。Flutterでのアプリ開発を始める際には、これらのウィジェットの特性と使い方を理解することが重要です。ぜひ、これらのウィジェットを使って、自分だけのアプリを作ってみてください。
