Stack below the AppBar and not behind - flutter

I cant seem to find the answer to this simple problem but I dont understand why my Stack is BELOW the appbar and not BEHIND it. Also, this is a custom appbar
What Im trying to achieve: The image should be BEHIND the appbar and not below it, meaning the appbar will overlap the image or is in front of the image
my code for this is this:
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 1,
backgroundColor: Colors.transparent,
),
body: ListView(
children: <Widget>[
Stack(
children: <Widget>[
Hero(
tag: widget.discount.name,
child: ShadowClip(
clipper: CircularClipper(),
shadow: Shadow(blurRadius: 0.0),
child: FadeInImage.assetNetwork(
placeholder: 'assets/images/placeholder.png',
height: 200.0,
width: double.infinity,
fit: BoxFit.cover,
image: widget.discount.imageUrl.Url,
),
),
),
// Positioned(
// top: 0, left: 0, right: 0, bottom: 0,
// child: DetailPageAppbar(height:60),
// ),
],
),

Please try below code and check output
SafeArea(
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 1,
leading: Icon(Icons.arrow_back_ios),
backgroundColor: Colors.transparent,
),
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Flexible(
flex: 3,
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://picsum.photos/250?image=9")))),
),
Flexible(
flex: 6,
child: ListView.builder(
itemCount: 50,
itemBuilder: (BuildContext context, int pos) {
return ListTile(
title: Text("121"),
);
},
),
)
],
)
],
),
));

Do this:
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: Header(),
//...
} //end method build
PreferredSize Header() {
return PreferredSize(
preferredSize: Size.fromHeight(56.0), //default appbar height (material design principles)
child: Container(
color: Colors.Transparent,
child: Center(
child: Text("APPBAR TEXT"),
),
),
);
} //end method Header

Related

How to code dynamic FlipCard List with FutureBuilder in Flutter

I am very new at flutter and I tried writing "body: new ListView.builder....." but it does not work, I am getting always red underline. Can you help me to fix this. I am getting the data to the flipcards from json albüm so I think I must use future builder
This is what it looks like, I want multiple cards according to the elements from json:
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: const Center(
child: Text(
"Main",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
backgroundColor: Colors.green[600],
),
body: Center(
child: FutureBuilder<Album>(
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView(
children: [
const SizedBox(height: 10),
Container(
margin: const EdgeInsets.all(15.0),
height: 200,
width: 350,
child: FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Container(
....................
),
back: Container(
.......................
),
),
),
],
);
} else if (snapshot.hasError) {
return ListView(
children: [
SizedBox(height: 10),
Container(
margin: const EdgeInsets.all(15.0),
height: 200,
width: 350,
child: FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Container(
back: Container(
),
),
),
],
);
}
},
),
),
),
);
}

not overlap SliverToBoxAdapter with a transparent SliverAppBar

Is it possible for a SliverToBoxAdapter to not be overlaped with a transparentSliverAppBar when scrolled upon?
Or give up on using SliverAppBar and just use AppBar instead?
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: [
Image(
image: bkgImage,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
alignment: Alignment.centerLeft,
),
Scaffold(
backgroundColor: Colors.transparent,
body: CustomScrollView(
slivers: [
SliverAppBar(
actions: <Widget>[
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
],
pinned: _pinned,
snap: _snap,
floating: _floating,
expandedHeight: 160,
backgroundColor: Colors.transparent,
elevation: 0.0,
flexibleSpace: FlexibleSpaceBar(
expandedTitleScale: 1.6,
titlePadding: EdgeInsets.all(18),
title: Text('Panahon'),
),
),
SliverList(
delegate: SliverChildListDelegate([
SizedBox(
height: 200,
child: Card(),
),
SizedBox(
height: 200,
child: Card(),
),
SizedBox(
height: 200,
child: Card(),
),
SizedBox(
height: 200,
child: Card(),
),
SizedBox(
height: 200,
child: Card(),
),
]),
)
],
),
),
],
),
);
}
The goal is this:
Precious view:
To get actual effect, we can use SliverPersistentHeaderDelegate. Concept is we need to pass image itself [both image must be screen size].
class MySliverHeaderDelegate extends SliverPersistentHeaderDelegate {
final double _maxExtent = 160;
final VoidCallback onActionTap;
final Image imageWidget;
MySliverHeaderDelegate({
required this.onActionTap,
required this.imageWidget,
});
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
debugPrint(shrinkOffset.toString());
return Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: imageWidget,
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(16),
child: Text(
'Panahon',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: Colors.white,
),
),
),
),
// here provide actions
Positioned(
top: 0,
right: 0,
child: IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
),
onPressed: onActionTap,
),
),
],
);
}
#override
double get maxExtent => _maxExtent;
#override
double get minExtent => kToolbarHeight;
#override
bool shouldRebuild(covariant MySliverHeaderDelegate oldDelegate) {
return oldDelegate != this;
}
}
And use
Widget build(BuildContext context) {
final imageWidget = Image.asset(
"assets/images/image01.png",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
alignment: Alignment.centerLeft,
);
return SafeArea(
child: Stack(
children: [
imageWidget,
Scaffold(
backgroundColor: Colors.transparent,
body: CustomScrollView(
slivers: [
SliverPersistentHeader(
pinned: true,
delegate: MySliverHeaderDelegate(
imageWidget: imageWidget,
onActionTap: () {
debugPrint("on Tap");
}),
),
//.....
],
),
),
],
),
);
}
Others way to handle this situation
Being SliverAppBar's backgroundColor:Colors.transparent you are able to see though appbar.
If you provide your preferable color, that will fix the issue in this case, but you will not get background effect on appBar.
SliverAppBar(
backgroundColor: Colors.green, // the one you like
For your case, you can use CupertinoSliverNavigationBar instead of using SliverAppBar. It will still block the background on scroll and it won't get that much height.
CupertinoSliverNavigationBar(
backgroundColor: Colors.transparent,
largeTitle: const Align(
alignment: Alignment.bottomLeft,
child: SizedBox(
child: Text('Panahon'),
),
),
trailing: IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
),

How to stretch an image when user scrolls in flutter

I want to stretch an image when the user scrolls.
Container(
child: Image.asset(
'assets/appHeader.png',
fit: BoxFit.cover,
width: size.width,
height: 170,
),
)
This image is at the top of the page and when user scrolls up I want to stretch the image.
It will be like the stretch in SliverAppBar. I am pretty new to flutter so I don't know much about animation.
Try this, i am create this by using FlexibleSpaceBar.
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
//pinned: true, if you need to show appBar.
pinned: false,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Image Text(optional)",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://miro.medium.com/max/700/1*_nCC_uFDVYas8uYa9m6fQQ.jpeg",
fit: BoxFit.cover,
)
/*-------Your Image here--------*/
/* Image.asset(
'assets/appHeader.png',
fit: BoxFit.cover,
width: size.width,
height: 170,
),*/
),
),
];
},
body: Center(
child: Text("Your screen data"),
),
),
);
}
this answer update regarding(that you ask in comment)(this applicable only for this situation that we discuss in question).
#override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: [
Scaffold(
//same code that above write
)
],
),
);
}

Scrollable page in flutter

I am new to flutter dart language and was wondering how to make the page scroll.
This is one of the pages of the code which I want to scroll:
class Second extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DraggableScrollableSheet(
builder: (context, scrollController) {
return SingleChildScrollView(
controller: scrollController,
child: Scaffold(
backgroundColor: const Color(0xffffffff),
body: Stack(
children: <Widget>[
Transform.translate(
offset: Offset(30.0, 296.0),
child:
Container(
width: 315.0,
height: 287.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(37.0),
image: DecorationImage(
image: const AssetImage('assets/images/right.png'),
fit: BoxFit.fill,
)
),
),
),
],
),
),
);
}
);
}
}
Note that this is not the full code as the code is very long.
I tried using the Draggable Scrollable Sheet and when I ran the code I could only see a black screen.
Can someone help me?
Thanks in advance :)
Easiest way to make something scroll in Flutter is to use ListView widget.
Try something like this:
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Column(
children: [
Container(
height: 2000,
child: Text('This container exceeds most screens'),
),
Text('End of container.'),
],
),
],
),
);
You can use SingleChildScrollview or Listview for scrolling,let me know if it works for you
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffffffff),
appBar: AppBar(
title: Text(""),
),
body: SingleChildScrollView(
child: Column(
children: [
Stack(
children: <Widget>[
Transform.translate(
offset: Offset(30.0, 296.0),
child: Container(
width: 315.0,
height: 287.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(37.0),
image: DecorationImage(
image: const
AssetImage('assets/images/right.png'),
fit: BoxFit.fill,
)),
)),
],
),
],
),
));
}

How to Flutter Background Image Positioning

When I write the Background Image codes in the main.dart file that I shared with you below, the data I want to use remains under Image. How can I solve this problem? I am aware that I wrote the part about Background in the wrong place, but I didn't know where to write it. Thank you for your help.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Weather App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.tealAccent,
appBar: AppBar(
title: Text('Flutter Weather App'),
),
body: Center(
child: Column(children: <Widget>[
//WEATHER DATA
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: weatherData != null
? Weather(weather: weatherData)
: Container(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: isLoading
? CircularProgressIndicator(
strokeWidth: 2.0,
valueColor:
new AlwaysStoppedAnimation(Colors.black),
)
: IconButton(
icon: new Icon(Icons.refresh),
tooltip: 'Refresh',
onPressed: () async {
await loadWeather();
},
color: Colors.black,
),
),
],
),
),
//BACKGROUND IMAGE
Container(
height: 501.7,
width: 420.0,
decoration: BoxDecoration(
image: DecorationImage(
image: isweatherDataLoaded //this
? HandleError()
: images["clear"],
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
),
//FUTURE FORECAST WEATHER DATA
SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 200.0,
child: forecastData != null
? ListView.builder(
itemCount: forecastData.list.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => WeatherItem(
weather: forecastData.list.elementAt(index)))
: Container(),
),
),
)
]))),
);
}
Wherever I write, it just didn't work. I want you to show me a way. If you want, I can share the rest of my codes with you. Happy Codding! Thanks..
I'd suggest moving the container with the background image up in the hierarchy, like this:
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Weather App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.tealAccent,
appBar: AppBar(
title: Text('Flutter Weather App'),
),
body: Container(
height: 501.7,
width: 420.0,
decoration: BoxDecoration(
image: DecorationImage(
image: isweatherDataLoaded //this
? HandleError()
: images["clear"],
fit: BoxFit.fill,
),
shape: BoxShape.rectangle,
),
child: Center(
child: Column(children: <Widget>[
//WEATHER DATA
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: weatherData != null
? Weather(weather: weatherData)
: Container(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: isLoading
? CircularProgressIndicator(
strokeWidth: 2.0,
valueColor:
new AlwaysStoppedAnimation(Colors.black),
)
: IconButton(
icon: new Icon(Icons.refresh),
tooltip: 'Refresh',
onPressed: () async {
await loadWeather();
},
color: Colors.black,
),
),
],
),
),
//FUTURE FORECAST WEATHER DATA
SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 200.0,
child: forecastData != null
? ListView.builder(
itemCount: forecastData.list.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => WeatherItem(
weather: forecastData.list.elementAt(index)))
: Container(),
),
),
)
])),
)),
);
}