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

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

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

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

Q&A

解決済

2回答

2337閲覧

【flutter】AppBarの背景を透明にしたい

OSARU_2020

総合スコア15

Flutter

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

0グッド

0クリップ

投稿2022/07/11 01:35

AppBarに検索バーのWidgetを実装しているのですが、
検索バー以外の部分を透過したいのですが上手くいきません。
どうすれば検索バー以外を透明化できるか教えて頂きたいです!

※黒ペンの部分が透過されておらずbobyのコンテンツが隠れてしまっているが、
これらの検索バー以外を透過して下の本コンテンツが見えるようにしたいです。
イメージ説明

コード全文を掲載
※コード前半の★部分を確認ください

flutter

1import 'package:flutter/material.dart'; 2import '../../widget/custom_listview.dart'; 3import '../../widget/custom_search_textfield.dart'; 4 5class SearchPage extends StatelessWidget { 6 7 @override 8 Widget build(BuildContext context) { 9 final Size size = MediaQuery.of(context).size; //デバイスの横幅サイズを取得 10 return Scaffold( 11 appBar: AppBar( 12 elevation: 0, 13 backgroundColor: Colors.transparent, //カラーを透明に指定★ 14 automaticallyImplyLeading: false, 15 title: const CustomSearchTextField(hinttext: '検索する'), //別Widgetのカスタム検索バーを設置★ 16 ), 17   //以下はボディーコンテンツになります 18 body: SafeArea( 19 child: SingleChildScrollView( 20 //画面のどこを触ってもスクロールできるように横幅をContainerで設定 21 child: Container( 22 width: size.width, 23 child: Column( 24 crossAxisAlignment: CrossAxisAlignment.start, 25 children: <Widget>[ 26 //ーーーーーーーーーーーーーーーーーーーーーーーーーーーー検索バー 27 //const CustomSearchTextField(hinttext: '検索する'), 28 //TODO:ーーーーーーーーーーーーーーーーーーーーーーーーーーーー急上昇スレッド 29 //TODO:ーーーーーーーーーーーーーーーーテキスト(急上昇) 30 const Padding( 31 padding: EdgeInsets.only(top: 20, bottom: 2, left: 20), 32 child: Text( 33 '急上昇 🔥', 34 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), 35 ), 36 ), 37 //TODO:ーーーーーーーーーーーーーーーー本コンテンツ(急上昇) 38 SizedBox( 39 height: 200, 40 child: ListView( 41 scrollDirection: Axis.horizontal, 42 shrinkWrap: true, 43 children: <Widget>[ 44 Card( 45 child: Container( 46 width: 200, 47 ), 48 color: Colors.blue, 49 ), 50 Card( 51 child: Container( 52 width: 200, 53 ), 54 color: Colors.green, 55 ), 56 Card( 57 child: Container( 58 width: 200, 59 ), 60 color: Colors.yellow, 61 ), 62 Card( 63 child: Container( 64 width: 200, 65 ), 66 color: Colors.pink, 67 ), 68 ], 69 ), 70 ), 71 //TODO:ーーーーーーーーーーーーーーーーーーーーーーーーーーーー新着スレッド 72 //TODO:ーーーーーーーーーーーーーーーーテキスト(新着) 73 const Padding( 74 padding: EdgeInsets.only(top: 20, bottom: 2, left: 20), 75 child: Text( 76 '新着スレッド', 77 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), 78 ), 79 ), 80 //TODO:ーーーーーーーーーーーーーーーー本コンテンツ(新着) 81 SizedBox( 82 height: 200, 83 child: ListView( 84 scrollDirection: Axis.horizontal, 85 shrinkWrap: true, 86 children: <Widget>[ 87 Card( 88 child: Container( 89 width: 200, 90 ), 91 color: Colors.blue, 92 ), 93 Card( 94 child: Container( 95 width: 200, 96 ), 97 color: Colors.green, 98 ), 99 Card( 100 child: Container( 101 width: 200, 102 ), 103 color: Colors.yellow, 104 ), 105 Card( 106 child: Container( 107 width: 200, 108 ), 109 color: Colors.pink, 110 ), 111 ], 112 ), 113 ), 114 //TODO:ーーーーーーーーーーーーーーーーーーーーーーーーーーーージャンルリスト 115 //TODO:ーーーーーーーーーーーーーーーーテキスト(ジャンル) 116 const Padding( 117 padding: EdgeInsets.only(top: 20, bottom: 2, left: 20), 118 child: Text( 119 '見つける 🔍', 120 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), 121 ), 122 ), 123 //TODO:ーーーーーーーーーーーーーーーー本コンテンツ(ジャンル) 124 ListView( 125 shrinkWrap: true, 126 physics: const NeverScrollableScrollPhysics(), //スクロール無効化 127 children: const <Widget>[ 128 CustomListView( 129 title: 'Item 1', 130 icon: Icon(Icons.import_contacts), 131 ), 132 CustomListView( 133 title: 'Item 2', 134 icon: Icon(Icons.import_contacts), 135 ), 136 CustomListView( 137 title: 'Item 3', 138 icon: Icon(Icons.import_contacts), 139 ), 140 CustomListView( 141 title: 'Item 4', 142 icon: Icon(Icons.import_contacts), 143 ), 144 CustomListView( 145 title: 'Item 5', 146 icon: Icon(Icons.import_contacts), 147 ), 148 CustomListView( 149 title: 'Item 6', 150 icon: Icon(Icons.import_contacts), 151 ), 152 ], 153 ), 154 ], 155 ), 156 ), 157 ), 158 ), 159 ); 160 } 161}

AppBarの検索バーのコードも一応掲載します。

flutter

1import 'package:flutter/material.dart'; 2 3class CustomSearchTextField extends StatelessWidget { 4 const CustomSearchTextField({ 5 Key? key, 6 required this.hinttext, 7 this.borderRadius = 30.0, 8 }) : super(key: key); 9 final String hinttext; 10 final double borderRadius; 11 12 @override 13 Widget build(BuildContext context) { 14 return Container( 15 margin: const EdgeInsets.symmetric(horizontal: 30), 16 decoration: BoxDecoration( 17 color: Colors.grey.shade200, 18 borderRadius: BorderRadius.circular(borderRadius), 19 ), 20 child: TextField( 21 keyboardType: TextInputType.emailAddress, 22 style: const TextStyle( 23 fontStyle: FontStyle.normal, 24 fontWeight: FontWeight.normal, 25 ), 26 decoration: InputDecoration( 27 hintText: hinttext, 28 border: InputBorder.none, 29 contentPadding: 30 const EdgeInsets.symmetric(vertical: 15, horizontal: 20), 31 ), 32 ), 33 ); 34 } 35}

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

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

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

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

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

guest

回答2

0

ベストアンサー

import 'package:flutter/material.dart'; //import '../../widget/custom_listview.dart'; //import '../../widget/custom_search_textfield.dart'; void main(){ runApp(MaterialApp(home:SearchPage(),)); } class SearchPage extends StatelessWidget { @override Widget build(BuildContext context) { final Size size = MediaQuery.of(context).size; //デバイスの横幅サイズを取得 return Scaffold( extendBodyBehindAppBar: true,//←これが必要。 appBar: AppBar( elevation: 0, backgroundColor: Colors.transparent, //カラーを透明に指定★ automaticallyImplyLeading: false, title: const CustomSearchTextField( hinttext: '検索する'), //別Widgetのカスタム検索バーを設置★ ), //以下はボディーコンテンツになります body: SingleChildScrollView( //画面のどこを触ってもスクロールできるように横幅をContainerで設定 child: Container( width: size.width, //child: Column( child:SizedBox( height:550.0, child: ListView( //crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ //ーーーーーーーーーーーーーーーーーーーーーーーーーーーー検索バー //const CustomSearchTextField(hinttext: '検索する'), //TODO:ーーーーーーーーーーーーーーーーーーーーーーーーーーーー急上昇スレッド //TODO:ーーーーーーーーーーーーーーーーテキスト(急上昇) const Padding( padding: EdgeInsets.only(top: 20, bottom: 2, left: 20), child: Text( '急上昇 🔥', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), ), ), //TODO:ーーーーーーーーーーーーーーーー本コンテンツ(急上昇) SizedBox( height: 200, child: ListView( scrollDirection: Axis.horizontal, shrinkWrap: true, children: <Widget>[ Card( child: Container( width: 200, ), color: Colors.blue, ), Card( child: Container( width: 200, ), color: Colors.green, ), Card( child: Container( width: 200, ), color: Colors.yellow, ), Card( child: Container( width: 200, ), color: Colors.pink, ), ], ), ), //TODO:ーーーーーーーーーーーーーーーーーーーーーーーーーーーー新着スレッド //TODO:ーーーーーーーーーーーーーーーーテキスト(新着) const Padding( padding: EdgeInsets.only(top: 20, bottom: 2, left: 20), child: Text( '新着スレッド', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), ), ), //TODO:ーーーーーーーーーーーーーーーー本コンテンツ(新着) SizedBox( height: 200, child: ListView( scrollDirection: Axis.horizontal, shrinkWrap: true, children: <Widget>[ Card( child: Container( width: 200, ), color: Colors.blue, ), Card( child: Container( width: 200, ), color: Colors.green, ), Card( child: Container( width: 200, ), color: Colors.yellow, ), Card( child: Container( width: 200, ), color: Colors.pink, ), ], ), ), //TODO:ーーーーーーーーーーーーーーーーーーーーーーーーーーーージャンルリスト //TODO:ーーーーーーーーーーーーーーーーテキスト(ジャンル) const Padding( padding: EdgeInsets.only(top: 20, bottom: 2, left: 20), child: Text( '見つける 🔍', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), ), ), //TODO:ーーーーーーーーーーーーーーーー本コンテンツ(ジャンル) SizedBox( height:300.0, child: ListView( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), //スクロール無効化 children: const <Widget>[ /* CustomListView( title: 'Item 1', icon: Icon(Icons.import_contacts), ), CustomListView( title: 'Item 2', icon: Icon(Icons.import_contacts), ), CustomListView( title: 'Item 3', icon: Icon(Icons.import_contacts), ), CustomListView( title: 'Item 4', icon: Icon(Icons.import_contacts), ), CustomListView( title: 'Item 5', icon: Icon(Icons.import_contacts), ), CustomListView( title: 'Item 6', icon: Icon(Icons.import_contacts), ),*/ ], ), ), ], ), ), ), ), ); } } class CustomSearchTextField extends StatelessWidget { const CustomSearchTextField({ Key? key, required this.hinttext, this.borderRadius = 30.0, }) : super(key: key); final String hinttext; final double borderRadius; @override Widget build(BuildContext context) { return Container( margin: const EdgeInsets.symmetric(horizontal: 30), decoration: BoxDecoration( color: Colors.grey.shade200, borderRadius: BorderRadius.circular(borderRadius), ), child: TextField( keyboardType: TextInputType.emailAddress, style: const TextStyle( fontStyle: FontStyle.normal, fontWeight: FontWeight.normal, ), decoration: InputDecoration( hintText: hinttext, border: InputBorder.none, contentPadding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20), ), ), ); } }

多分これで行けますでしょうか。

Scaffoldに
extendBodyBehindAppBar: true,
というフィールドがあるみたいです。

しかし、それを使ってもSafeAreaがあると透けないので、SafeAreaを削除したらこうなりました。

SafeAreaはAppBarをラップするか、Scaffoldをラップするか、したら、ステータスバーが常に表示される、みたいな使い方だったような気がします。ちょっと詳しくは覚えていませんが。

ただSafeAreaを削除するとキーボードが引っ込んだ時にスクロール位置が戻らないので、ColumnをListViewに変えました。
そうするとUnbounded heightエラーが出るので適当にSizedBoxでサイズ指定しています笑

とりあえずAppBarが透けない原因はSafeAreaだと思います。

あと最初の回答はかなり的外れでした笑

投稿2022/07/12 00:38

moriman

総合スコア615

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

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

OSARU_2020

2022/07/12 01:08

ありがとうございます! お陰様で解決しました・・なんでもかんでもSafeAreaを入れていたのですがAppBarを透明化の邪魔をしちゃうのですね!大変勉強になりました、とても感謝しております!
moriman

2022/07/12 01:23

よかったです! 頑張ってください!
guest

0

こんにちは。
動作確認しておりません。
違ってたらご容赦くださいませ。

CustomSearchTextFieldのContainerのcolorもColors.transparentにする、とかですかねー?
それ以外思い浮かばないです。

投稿2022/07/11 09:24

moriman

総合スコア615

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

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

OSARU_2020

2022/07/11 12:44

こんにちは。 コメントありがとうございます! 試してみたのですが、上手くいきませんでした。。。色々試してみます!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問