Make custom AppBar in Flutter - flutter

Question

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')),
),
],
),
),
),
),
),
);
}
}
[
This is my Result so far
This is my Result so far

Answer 1

you can add these lines of code to remove the backgroundColor from AppBar widget.
backgroundColor: Colors.transparent,
elevation: 0
If you want to implement it from zero, you can use a Row with 2 children. First child (a Text) for the title and the second one (a Row) for buttons. Don't remember to set mainAxisAlignment to MainAxisAlignment.spaceBetween.
I hope this help you
Here is the code:
import 'dart:ui';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const 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: const BoxDecoration(
// color: Colors.cyan,
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage("lib/assets/images/Bg.png"),
),
),
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage(
"lib/assets/images/Bg2.png",
),
scale: 1.05,
),
),
child: CustomScrollView(
slivers: [
SliverAppBar(
elevation: 0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
floating: false,
snap: false,
pinned: true,
stretch: true,
actions: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color.fromARGB(255, 197, 193, 193),
const Color.fromARGB(255, 167, 156, 156)
.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.all(2),
child: const Icon(Icons.notifications),
),
const SizedBox(width: 10),
//Profile
ClipOval(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFFFFFFFF),
const Color(0xFF000000).withOpacity(0),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
padding: const EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: const DecorationImage(
image:
ExactAssetImage('lib/assets/images/baki.jpg'),
fit: BoxFit.fill,
),
),
),
),
),
],
title: const Text(
"Startseite",
style: TextStyle(color: Colors.black),
),
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: [
const Color(0xFF4B4646)
.withOpacity(0.6),
const 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: const EdgeInsets.all(5),
child: const 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: const Icon(Icons.filter_alt,
size: 22, color: Colors.green),
),
),
],
),
),
),
),
SliverFillRemaining(
child: 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')),
),
],
),
),
),
],
),
),
),
);
}
}