【Flutter】containerの下線のサイズはどう調整したらいいのでしょうか？

Question

質問内容

containerに下線をつけたいです。
しかし、ネットで調べても線の太さを調整する方法は出てくるのですが、線自体の幅を調整する方法が出てこず、質問させていただきました。
どなたか教えていただけないでしょうか？

該当のソースコード

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class PushNotification extends StatefulWidget {
  const PushNotification({Key? key}) : super(key: key);
  @override
  State<PushNotification> createState() => _PushNotification();
}

class _PushNotification extends State<PushNotification> {
  bool _isOn1 = true;
  bool _isOn2 = true;
  bool _isOn3 = true;
  bool _isOn4 = true;
  bool _isOn5 = true;
  bool _isOn6 = true;

  @override
  Widget build(BuildContext context) {
    final double deviceHeight = MediaQuery.of(context).size.height;
    final double devicewWdth = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 243, 243, 243),
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(70),
        child: AppBar(
          iconTheme: IconThemeData(color: Colors.black, size: 23),
          leadingWidth: devicewWdth * 0.2,
          backgroundColor: Color.fromARGB(255, 243, 243, 243),
          elevation: 0.0,
          centerTitle: true,
          title: Text('プッシュ通知',
              style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 14,
                  color: Colors.black)),
          bottom: PreferredSize(
              child: Container(
                height: 0.3,
                color: Color.fromARGB(255, 156, 156, 156),
              ),
              preferredSize: Size.fromHeight(5)),
        ),
      ),
      body: Center(
        child: Container(
          color: Color.fromARGB(255, 243, 243, 243),
          child: Column(
            children: <Widget>[
              Container(
                height: deviceHeight * 0.08,
                width: devicewWdth,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Color.fromARGB(255, 156, 156, 156),
                      width: 0.3,
                    ),
                  ),
                  color: Colors.white,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Row(
                      children: const <Widget>[
                        Text('スイッチ'),
                      ],
                    ),
                    CupertinoSwitch(
                      value: _isOn1,
                      onChanged: (bool? value) =>
                          setState(() => _isOn1 = value!),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)

Comments

[ta.fu]

2次元の「線」では、幅と太さは、通常同じことを表します。
ただ質問では異なる認識として書かれているように見えます。

質問で書かれている「幅」とは、長さのことですか？
手書きでもいいので、図でどういったUIを望んでいるのかを書いた方が回答者にはわかりやすいと思います。

[bbiiq]

そうなんですね！
教えていただきありがとうございます。
私は線の長さのことを「幅」だと思って使っていました。
しかしコメントまでしていただいて申し訳ないのですが、私のやりたいことは「 Dividerウィジェット」を使うことで実現することができました。
ありがとうございました。

Answer 1

下線の長さの調整、ということですか。
それは読み取れませんでした笑
borderとして調整(カスタマイズ)する方法はあるのかわからないですね。

代わりになるかわかりませんがよければ参考にされてください。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ContainerWithArbitraryLengthUnderline(),
      ),
    );
  }
}

class ContainerWithArbitraryLengthUnderline extends StatelessWidget {
  const ContainerWithArbitraryLengthUnderline({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment(0.0,1.03),
      children: [
        Container(
          height: 200.0,
          //width: 200.0,
          color: Colors.blue[100],
        ),
        Container(
          height:6.0,
          width:200.0,
          color: Colors.black,
        ),
      ],
    );
  }
}

Answer 2

私のやりたいことは区切り線をつけることだったので、「Dividerウィジェット」を使い実現することができました。回答していただいた皆さんありがとうございました。参考になりました。

Answer 3

こういうことでしょうか?

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Container(
          decoration:BoxDecoration(
            color:Colors.red[100],
            border:Border(
              top:BorderSide(
                width:1.0,
                color: Colors.black,
              ),
              bottom: BorderSide(
                width:10.0,
                color: Colors.black,
              ),
            ),
          ),
          width:200.0,
          height:100.0,
        ),
      ),
    );
  }
}

Answer 4

それは辛いですね、、、🥺