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

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

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

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

解決済

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

OSARU_2020
OSARU_2020

総合スコア15

Flutter

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

2回答

0リアクション

0クリップ

348閲覧

投稿2022/07/11 01:35

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

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

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

flutter

import 'package:flutter/material.dart'; import '../../widget/custom_listview.dart'; import '../../widget/custom_search_textfield.dart'; class SearchPage extends StatelessWidget { @override Widget build(BuildContext context) { final Size size = MediaQuery.of(context).size; //デバイスの横幅サイズを取得 return Scaffold( appBar: AppBar( elevation: 0, backgroundColor: Colors.transparent, //カラーを透明に指定★ automaticallyImplyLeading: false, title: const CustomSearchTextField(hinttext: '検索する'), //別Widgetのカスタム検索バーを設置★ ),    //以下はボディーコンテンツになります body: SafeArea( child: SingleChildScrollView( //画面のどこを触ってもスクロールできるように横幅をContainerで設定 child: Container( width: size.width, child: Column( 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:ーーーーーーーーーーーーーーーー本コンテンツ(ジャンル) 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), ), ], ), ], ), ), ), ), ); } }

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

flutter

import 'package:flutter/material.dart'; 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), ), ), ); } }

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Flutter

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