※本記事で使用している環境
<パソコン>
機種: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)
前回は、Padding Widget についての解説を行いました。
今回は、Divider Widget について解説します。
記事を執筆するにあたって、以下の書籍を参考にしました。
参考にした書籍
公式ドキュメントの該当箇所
公式ドキュメントの解説は、以下のページにあります。
https://api.flutter.dev/flutter/widgets/Center-class.html
Divider Widget を使用する手順
Divider Widget は、区切り線のようなものです。
では、以下のコードになるように書いていきます。
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: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
children: [
Text(_header),
Divider(
thickness: 20.0,
height: 50.0,
),
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: Center(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
children: [
Text(_header),
ElevatedButton(
onPressed: _onClick,
child: Text("Button"),
),
],
),
),
),
),
);
}
void _onClick() {
print("メソッドの中です。ボタンが押されました。");
setState(() {
_header = "ボタンが押されたので変化しました ${_counter++}";
});
}
}</code></pre></div>
<!-- /wp:loos-hcb/code-block -->
区切り線が表示されたのがわかります。
Divider Widget の厚さが変わりました。
「height」プロパティの値を変えることで、Divider Widget とその上下にある Widget との距離が変化します。
これにて、Divider Widget についての解説を終わります。
コメント