【Flutter】Divider の使い方

2024年8月31日2024年9月23日

※本記事で使用している環境

＜パソコン＞
機種：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 についての解説を行いました。

公式ドキュメントの該当箇所

公式ドキュメントの解説は、以下のページにあります。

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++}";
    });
  }
}

STEP

準備

前回のコードの続きから操作を行なっていきます。

一旦、以下のコードを入力してください。

このコードを元に変更を加えていきます。

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 -->

STEP

Text Widget の下に、Divider Widget を設置する