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
)
],
),
);
}
Related
I am using CustomScrollView inside Scaffold ,dont't know why it's not detecting Scrolling behaviour.
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
// SliverAppBar(floating: true,),
SliverAppBar(
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
"assets/image/food.png",
width: double.maxFinite,
fit: BoxFit.cover,
),
),
)
],
),
);
}
}
try using SingleChildScrollView()
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: () {},
),
),
I am trying to achieve scroll in Flutter Web where I have few containers which are stacked and I use SingleChildScrollView to scroll the widget. However, when I scroll the first container everything working fine but the second one which is a child of the second container responds to the scroll without completing the initial one. And also is there a way to make a sticky header for the second container. How can I make the 3rd container(orange) to scroll after the 2nd(blue) one is finished scrolling? Here is what I am trying to achieve:
https://yobithemes.com/demo/html/freda/dark-video-index.html
And here what I got so far:
class MainScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
IntroScreen(),
SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height - 100,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
),
Container(
padding: EdgeInsets.only(top: 100),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.orange,
),
],
),
),
),
],
),
),
),
],
),
);
}
}
You can achieve it by using sliver.
SliverToBoxAdapter fill the transparent area with screen height - app bar height.
SliverAppBar: make it sticky by setting floating and pin to true
class MainScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
IntroScreen(),
CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: MediaQuery.of(context).size.height - 50,
),
),
SliverAppBar(
// toolbarHeight: 50,
floating: true,
pinned: true,
title: Container(
child: Center(child: Text('Header')),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
height: MediaQuery.of(context).size.height-50,
color: Colors.primaries[index % Colors.primaries.length],
),
),
),
],
),
],
),
);
}
}
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,
)),
)),
],
),
],
),
));
}
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