As you can see in Picture 1 & 2 the List scrolls under the transparent SliverAppBar. Is there any possibility to let the SliverAppBar stay transparent and don't show the List underneath? (As you can see in Picture 1 & 2 the List scrolls under the transparent SliverAppBar. Is there any possibility to let the SliverAppBar stay transparent and don't show the List underneath?)
// 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(
width: MediaQuery.of(context).size.width * 0.06,
height: MediaQuery.of(context).size.height * 0.03,
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: 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')),
),
],
),
),
),
),
);
}
}
1:
2:
