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

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

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

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

Dart

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

Q&A

解決済

1回答

358閲覧

【Flutter】Contanaierの中身を上に移動させたいです。

bbiiq

総合スコア51

Flutter

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

Dart

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

0グッド

0クリップ

投稿2023/02/04 10:41

実現したいこと

Contanaierの子Widgetを上に移動させたいです。
添付した画像のContanaierの中身(枠線の中)を全体的に上に移動させたいのですが、子Widgetの位置が固定?されており上の方に移動させることができません(移動というより最下部に隙間をつくりたい)。
どうやれば移動させることができるのでしょうか?

イメージ説明

前提

勉強がてらTwitterの通知画面を作成しています。

該当のソースコード

Dart

1import 'package:flutter/material.dart'; 2import 'package:flutter/gestures.dart'; 3 4void main() { 5 runApp(MyApp()); 6} 7 8class MyApp extends StatelessWidget { 9 const MyApp({super.key}); 10 11 12 Widget build(BuildContext context) { 13 return MaterialApp( 14 home: const MyHomePage(), 15 ); 16 } 17} 18 19class MyHomePage extends StatefulWidget { 20 const MyHomePage({super.key}); 21 22 23 State<MyHomePage> createState() => _MyHomePageState(); 24} 25 26class _MyHomePageState extends State<MyHomePage> { 27 28 Widget build(BuildContext context) { 29 final double deviceHeight = MediaQuery.of(context).size.height; //デバイスの高さ 30 final double deviceWdth = MediaQuery.of(context).size.width; //デバイスの幅 31 return Scaffold( 32 body: Center( 33 child: Container( 34 height: deviceHeight * 0.1, 35 padding: EdgeInsets.only(bottom: deviceHeight * 0.0), 36 decoration: BoxDecoration( 37 border: Border.all(color: Colors.red), 38 borderRadius: BorderRadius.circular(10), 39 ), 40 child: Row( 41 children: [ 42 Row( 43 children: [ 44 SizedBox( 45 width: deviceWdth * 0.07, 46 ), 47 Column( 48 mainAxisAlignment: MainAxisAlignment.center, 49 crossAxisAlignment: CrossAxisAlignment.start, 50 children: [ 51 Row( 52 children: [ 53 Icon( 54 Icons.favorite, 55 color: Color.fromARGB(255, 237, 79, 158), 56 size: deviceWdth * 0.05, 57 ), 58 SizedBox( 59 width: deviceWdth * 0.03, 60 ), 61 Icon( 62 Icons.pending, 63 color: Color.fromARGB(255, 237, 79, 158), 64 size: deviceWdth * 0.05, 65 ), 66 SizedBox( 67 width: deviceWdth * 0.673, 68 ), 69 IconButton( 70 padding: EdgeInsets.only( 71 bottom: deviceHeight * 0.02, 72 ), 73 splashRadius: deviceWdth * 0.025, 74 splashColor: Colors.transparent, 75 onPressed: () => Navigator.of(context).pop(), 76 icon: const Icon(Icons.clear), 77 color: const Color.fromARGB(255, 183, 183, 183), 78 iconSize: deviceWdth * 0.05, 79 ), 80 ], 81 ), 82 Row( 83 children: [ 84 SizedBox( 85 width: deviceWdth * 0.08, 86 ), 87 Text.rich( 88 TextSpan( 89 children: [ 90 TextSpan( 91 recognizer: TapGestureRecognizer() 92 ..onTap = null, 93 text: '名前', 94 style: TextStyle( 95 color: Colors.black, 96 fontWeight: FontWeight.w600, 97 fontSize: deviceWdth * 0.035, 98 decoration: TextDecoration.underline), 99 ), 100 TextSpan( 101 text: 'さんがいいねしました', 102 style: TextStyle( 103 color: Colors.black, 104 fontWeight: FontWeight.w500, 105 fontSize: deviceWdth * 0.035, 106 ), 107 ), 108 ], 109 ), 110 ), 111 ], 112 ), 113 ], 114 ), 115 ], 116 ), 117 ], 118 ), 119 ), 120 )); 121 } 122} 123

試したこと

paddingをつかったり、sizedBoxを使ったのですが、移動させることはできませんでした。

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

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65 darwin-arm64, 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)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

IconButtonのプロパティに「 constraints: const BoxConstraints(),」を追加したら無事できました。

投稿2023/02/04 13:16

bbiiq

総合スコア51

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問