※本記事で使用している環境
<パソコン>
機種:MacBook Air(13inch)
OS:macOS Sonoma(ver.14.5)
チップ:Apple M3
シェル:zsh
<ソフトウェア>
・Flutter(ver.3.22.3)
・Xcode(ver.15.4)
・CocoaPods(ver.1.15.2)
・Android Studio(ver.2024.1)
・Visual Studio Code(ver.1.92.0)
前回は、ElevatedButton Widget についての解説を行いました。
今回は、Center Widget について解説します。
記事を執筆するにあたって、以下の書籍を参考にしました。
参考にした書籍
公式ドキュメントの該当箇所
公式ドキュメントの解説は、以下のページにあります。
https://api.flutter.dev/flutter/widgets/Center-class.html
ウィジェットを画面の中央に配置する手順
では、以下のコードになるように書いていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _header = "何か表示されるエリア_プロパティ";
int _counter = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Hello Stateful Widget"),
),
body: Center(
child: Column(
children: [
Text(_header),
ElevatedButton(
onPressed: _onClick,
child: Text("Button"),
),
],
),
),
),
);
}
void _onClick() {
print("メソッドの中です。ボタンが押されました。");
setState(() {
_header = "ボタンが押されたので変化しました ${_counter++}";
});
}
}
前回のコードの続きから操作を行なっていきます。
一旦、以下のコードを入力してください。
このコードを元に変更を加えていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _header = "何か表示されるエリア_プロパティ";
int _counter = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Hello Stateful Widget"),
),
body: Column(
children: [
Text(_header),
ElevatedButton(
onPressed: _onClick,
child: Text("Button"),
),
],
),
),
);
}
void _onClick() {
print("メソッドの中です。ボタンが押されました。");
setState(() {
_header = "ボタンが押されたので変化しました ${_counter++}";
});
}
}
Column Widget にカーソルを合わせた状態で、以下のキーボードコマンドを押します。
Mac command + .
Win Ctrl + .
様々な項目が表示されますので、「Wrap with Center」をクリックします。
iOS シミュレーター画面を見てみましょう。
テキストとボタンが、画面の中央に配置されたのがわかります。
これにて、Center Widget についての解説を終わります。
次は、Padding Widget についての解説を行います。
コメント