[Flutter]横線を表示するには？

どうも、ちょげ(@chogetarou)です。

横線を表示する方法を紹介します。

方法

横線を表示する方法は、２つあります。

Divider

１つは、Dividerを使う方法です。

具体的には、横線を表示したい場所にDividerを配置します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Divider(/*区切り線の設定*/),
      ),
    );
  }

[Flutter]「Dividerウェジェット」の使い方

「Dividerウェジェット」の使い方を解説します。

www.choge-blog.com

2021.10.01

Container

もう１つは、Containerを使う方法です。

具体的には、横線を表示したい場所に、色とサイズだけを指定したContainerを配置します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: /*高さ*/,
          width: /*横幅*/,
          color: 色,
        ),
      ),
    );
  }

まとめ

Flutterで横線を表示するには、DividerもしくはContainerを使います。

[Flutter]「Divider（区切り線）」の色を変えるには？

Dividerウェジェットで表示する区切り線の色を変える方法を紹介します。

www.choge-blog.com

2021.10.01

[Flutter]「Dividerウェジェット」の使い方

「Dividerウェジェット」の使い方を解説します。

www.choge-blog.com

2021.10.01

[Flutter]横スクロールのリストビューに区切り線をつけるには？

横スクロールのリストビューに区切り線をつける方法を紹介します。

www.choge-blog.com

2021.10.28