質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

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

bbiiq
bbiiq

総合スコア33

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

4回答

0グッド

0クリップ

300閲覧

投稿2022/11/23 09:25

質問内容

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

該当のソースコード

Dart

1import 'package:flutter/material.dart'; 2import 'package:flutter/cupertino.dart'; 3 4class PushNotification extends StatefulWidget { 5 const PushNotification({Key? key}) : super(key: key); 6 7 State<PushNotification> createState() => _PushNotification(); 8} 9 10class _PushNotification extends State<PushNotification> { 11 bool _isOn1 = true; 12 bool _isOn2 = true; 13 bool _isOn3 = true; 14 bool _isOn4 = true; 15 bool _isOn5 = true; 16 bool _isOn6 = true; 17 18 19 Widget build(BuildContext context) { 20 final double deviceHeight = MediaQuery.of(context).size.height; 21 final double devicewWdth = MediaQuery.of(context).size.width; 22 return Scaffold( 23 backgroundColor: Color.fromARGB(255, 243, 243, 243), 24 appBar: PreferredSize( 25 preferredSize: Size.fromHeight(70), 26 child: AppBar( 27 iconTheme: IconThemeData(color: Colors.black, size: 23), 28 leadingWidth: devicewWdth * 0.2, 29 backgroundColor: Color.fromARGB(255, 243, 243, 243), 30 elevation: 0.0, 31 centerTitle: true, 32 title: Text('プッシュ通知', 33 style: TextStyle( 34 fontWeight: FontWeight.w600, 35 fontSize: 14, 36 color: Colors.black)), 37 bottom: PreferredSize( 38 child: Container( 39 height: 0.3, 40 color: Color.fromARGB(255, 156, 156, 156), 41 ), 42 preferredSize: Size.fromHeight(5)), 43 ), 44 ), 45 body: Center( 46 child: Container( 47 color: Color.fromARGB(255, 243, 243, 243), 48 child: Column( 49 children: <Widget>[ 50 Container( 51 height: deviceHeight * 0.08, 52 width: devicewWdth, 53 decoration: BoxDecoration( 54 border: Border( 55 bottom: BorderSide( 56 color: Color.fromARGB(255, 156, 156, 156), 57 width: 0.3, 58 ), 59 ), 60 color: Colors.white, 61 ), 62 child: Row( 63 mainAxisAlignment: MainAxisAlignment.spaceBetween, 64 children: <Widget>[ 65 Row( 66 children: const <Widget>[ 67 Text('スイッチ'), 68 ], 69 ), 70 CupertinoSwitch( 71 value: _isOn1, 72 onChanged: (bool? value) => 73 setState(() => _isOn1 = value!), 74 ), 75 ], 76 ), 77 ), 78 ], 79 ), 80 ), 81 ), 82 ); 83 } 84} 85 86

補足情報(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)

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

ta.fu

2022/11/24 02:00

2次元の「線」では、幅と太さは、通常同じことを表します。 ただ質問では異なる認識として書かれているように見えます。 質問で書かれている「幅」とは、長さのことですか? 手書きでもいいので、図でどういったUIを望んでいるのかを書いた方が回答者にはわかりやすいと思います。
bbiiq

2022/11/26 04:10

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

回答4

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, ), ], ); } }

投稿2022/11/24 12:37

moriman

総合スコア516

bbiiq👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

自己解決

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

投稿2022/11/26 04:12

bbiiq

総合スコア33

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

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

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, ), ), ); } }

投稿2022/11/23 16:11

moriman

総合スコア516

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

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

投稿2022/11/23 10:16

user_x_xxx

総合スコア22

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/11/23 10:22

こちらの回答が他のユーザーから「質問に対する回答となっていない投稿」という指摘を受けました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。