I have this flutter page
I want this flowers image background to go all over the app bar as well with text MyProfile with other app bar buttons such as drawer and search button overlaying it.
Here is code as of now
Container(
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height: 200.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
),
)
],
),
Positioned(
top: 100.0,
child: Container(
height: 190.0,
width: 190.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
),
border:
Border.all(color: Colors.white, width: 6.0)),
),
),
],
),
),
some change on your code and result:
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
return SafeArea(child: Scaffold(
body: Container(
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height: 240.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
),
)
],
),
Positioned(
top: 0.0,
child: Container(
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(icon: Icon(Icons.menu,color: Colors.white,), onPressed: (){}),
Text('My Profile',style: TextStyle(color: Colors.white,fontSize: 22),),
],
),
IconButton(icon: Icon(Icons.notifications,color: Colors.white,), onPressed: (){}),
],
),
height: 52,
),
),
Positioned(
top: 120.0,
child: Container(
height: 190.0,
width: 190.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
),
border:
Border.all(color: Colors.white, width: 6.0)),
),
),
],
),
),
));
}```
You can easily achieve this by setting:
extendBodyBehindAppBar: true property in Scaffold widget.
backgroundColor: Colors.transparent and set elevation: 0.0 in AppBar widget to make it fully transparent.
If true, and an appBar is specified, then the height of the body is
extended to include the height of the app bar and the top of the body
is aligned with the top of the app bar.
This is useful if the app bar's AppBar.backgroundColor is not
completely opaque.
Source: extendBodyBehindAppBar property from Flutter Doc
After this, adjust the height for:
background image
profile image
I copied your code and adjust it with the above solution, see the example below:
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text(widget.title),
leading: Icon(Icons.list),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: Container(
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height: 300.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
),
)
],
),
Positioned(
top: 180.0,
child: Container(
height: 190.0,
width: 190.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
),
border: Border.all(color: Colors.white, width: 6.0)),
),
),
],
),
),
);
}
Please refer to this property of the Scaffold widget in Flutter. It will do what you want. You might have to resize things a bit. And maybe, make the AppBar color as transparent.
Related
Does anybody have an idea how I can create a view that is similar to the image attached? I'm using a Stack component with the mobile_scanner package, but I don't understand how I can leave the center of the screen without opacity.
Try this one
#override
Widget build(BuildContext context) {
return Material(
child: Stack(
fit: StackFit.expand,
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.8), BlendMode.srcOut),
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut),
),
Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.green,
),
),
),
],
),
),
],
),
);
}
I want to make a design like following
I build the base layout with background image. Following is the code to achieve that. Now i want to put "Grocery store" Text on top of this image and other widgets. How can i do that ?
Widget build(BuildContext context) {
return Container(
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
// child: ????
),
),
],
),
),
],
),
);}
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
child: Text('Grocery store'),
//padding: <-- Using to shift text position a little bit for your requirement
),
Stack/Align is your friend.
Take a look here https://api.flutter.dev/flutter/widgets/Stack-class.html
Here is a basic example (based in your code):
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
color: Colors.red,
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(
"http://www.exampledomain.com/images/background.jpg"),
//fit: BoxFit.cover,
),
),
),
),
],
),
),
],
),
),
),
Align(
alignment: Alignment.center,
child: Text("Grocery store"))
]
);
}
I have like this code to build youtube player thumbnail with icon:
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://img.youtube.com/vi/_uOgXpEHNbc/0.jpg"),
fit: BoxFit.fitHeight),
),
),
Container(
color: Colors.black.withOpacity(0.7),
),
Container(
alignment: Alignment.center,
child: Center(
child: Icon(
Icons.smart_display,
color: Colors.red,
size: 100.0,
),
),
),
],
),
This is result of code:
How to make sure that the transparent background of the picture does not affect the central icon? I just need the icon to stay light.
If you want to keep white color of the Play icon in the center then you can try like this
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://img.youtube.com/vi/_uOgXpEHNbc/0.jpg"),
fit: BoxFit.fill),
),
),
Container(
color: Colors.black.withOpacity(0.7),
),
Container(
alignment: Alignment.center,
child: Center(
child: Container(
height: 50,
width: 60,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.center,
child: Center(
child: Icon(
Icons.smart_display,
color: Colors.red,
size: 100.0,
),
),
),
],
)
You can use Color(0xFF000000).withOpacity(0.7) inside your parent container so it will affect only your parent. You can try here
return Center(
child: Stack(
children: [
Center(
child: Container(
height: 200,
width: 200,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVuX218dvGRwSyGhdr1KeTrN6wocBci6xWWQ&usqp=CAU'),
fit: BoxFit.cover,
),
),
child: Container(
color: Color(0xFF000000).withOpacity(0.7),
),
),
),
Center(
child: Container(
child: IconButton(
onPressed: () {},
icon: Image(
image: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRtN8lufTjm-VwUnxm5uAwsW5dCrZqzFFWxg&usqp=CAU"),
),
iconSize: 80,
splashColor: Colors.red,
),
),
),
],
),
);
I use the worst possible images to showcase the example. Don't mind
Output
Where should the red oval be
Hello, my question is how can I get the red oval in the picture above to the position marked below? Does anyone know? I thank you in advance.
This is my code:
return Scaffold(
backgroundColor: const Color(0xffffffff),
body: Stack(
children: <Widget>[
Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 436.0,
height: 207.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(29.0),
image: DecorationImage(
image: const AssetImage('assets/images/vorlage.png'),
fit: BoxFit.cover,
),
),
),
Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 265.0,
height: 20.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14.0),
color: const Color(0xffff0000),
),
),
You might need to look into painting a Canvas. It's fairly well developed, and quite a bit of tutorial information on it (even how to animate things!). Everything is a widget, but some of those widgets are RenderObjects. :)
If you want to red oval to always be fixed at a position in it's parent widget, you can use Positioned widget to fix the distance from top, then use Center to place it in the middle. You will have to tweak the top value (I put 300 arbitrarily).
return Scaffold(
backgroundColor: const Color(0xffffffff),
body: Stack(
children: <Widget>[
Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 436.0,
height: 207.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(29.0),
image: DecorationImage(
image: const AssetImage('assets/images/vorlage.png'),
fit: BoxFit.cover,
),
),
),
Positioned(
top: 300 // <----tweak this till it's where you want it (distance from top)
child: Center(
child: Container(
child: Align(
alignment: Alignment.bottomCenter,
),
width: 265.0,
height: 20.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14.0),
color: const Color(0xffff0000),
),
),
),
),
I have an image like this
and i need to add widgets upon this image. It should look like the contents are just on the mobile screen. I tried searching for a way but i dint get any. I tried using stack like this:
Container(
child: Stack(
children: <Widget>[
Positioned(
child: Container(
padding: EdgeInsets.fromLTRB(60, 110, 60, 90),
//body
),
),
Container(width: 1000,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/transparentMobile.png'),
fit: BoxFit.fill)),
),
],
),
),
It worked correctly on my phone:
but on other phone it looks very different. How do i write a single code for multiple screens?
Finally i got a way to do it. Instead of working hard on the code, i just cropped the image into 3 parts :
top :
body:
bottom:
and added them to columns like this:
AspectRatio(
aspectRatio: 1/2,
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileTop.png'),
fit: BoxFit.fill
)
),
),
),
Expanded(
flex: 7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBody.png',),
fit: BoxFit.fill
)
),
height: 100,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
automaticallyImplyLeading: false,
title: Text('My Application'),
),
body: Center(
child: Text(
'Hello World!',
style: TextStyle(color: Colors.black),
),
),
backgroundColor: Colors.white,
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBottom.png'),
fit: BoxFit.fill
)
),
),
),
],
),
),
),
and the image now looks much similar on most of the devices now:
Thanks for your help!