I am currently working on my own App and want to make this custom AppBar. Can somebody help me doing this? MY main Problem is, the transparent Background and my ListView going under it which looks really bad. Is there any possibility to let the background trasnparent but don't show the List at the top?
// ignore_for_file: unused_local_variable
import 'dart:ui';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title = "Hallo"}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage("lib/assets/images/Bg.png"),
),
),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage(
"lib/assets/images/Bg2.png",
),
scale: 1.05,
),
),
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxISScrolled) => [
SliverAppBar(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
floating: true,
snap: false,
pinned: true,
title: //Startseite
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Startseite",
style: TextStyle(color: Colors.black),
),
//Notification
Row(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 197, 193, 193),
Color.fromARGB(255, 167, 156, 156)
.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12)),
padding: EdgeInsets.all(2),
child: Icon(Icons.notifications),
),
SizedBox(width: 10),
//Profile
ClipOval(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFFFFFFF),
Color(0xFF000000).withOpacity(0),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: ExactAssetImage(
'lib/assets/images/baki.jpg'),
fit: BoxFit.fill,
),
),
),
),
),
],
),
],
),
bottom: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.transparent,
title: Container(
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Container(
width:
MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height *
0.025,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF4B4646).withOpacity(0.6),
Color(0xFFFFFFFF).withOpacity(0.2),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5.0),
child: Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
"Suchen",
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: "Acme-Regular",
color: Colors.grey.shade200,
fontSize: 10),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 170.0,
),
child: Container(
decoration: BoxDecoration(
color:
Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
padding: EdgeInsets.all(5),
child: Icon(Icons.search,
size: 20, color: Colors.green),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
child: Icon(Icons.filter_alt,
size: 22, color: Colors.green),
),
),
],
),
),
),
),
],
body: Expanded(
child: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
),
),
),
),
);
}
}
[
