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

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}

回答2件

ベストアンサー

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