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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/07/12 01:08
2022/07/12 01:23