How can I create a view where the middle is not blurred - flutter

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,
),
),
),
],
),
),
],
),
);
}

Related

How to create an image overlay which match the size of the image?

I'm trying to create an overlay above an image, which should match the size of the image no matter which size I give the Container.
This is my code I tried so far.
Container(
width: double.infinity,
height: double.infinity,
color: Colors.red,
child: Stack(
children: [
Image.memory(
snapshot.data!,
fit: BoxFit.contain,
),
Positioned.fill(
child: Container(
color: Colors.grey.withOpacity(0.5),
),
),
],
),
),
This results to this image (https://i.stack.imgur.com/eL3Ig.png)
I expect that the grey overlay matches the size of the image.

Move the Stack into a FittedBox:
Container(
width: double.infinity,
height: double.infinity,
color: Colors.red,
child: FittedBox(
child: Stack(
children: [
Image.asset(
'images/default.png',
),
Positioned.fill(
child: Container(
color: Colors.grey.withOpacity(0.5),
child: const Center(
child: Text('Overlay'),
),
),
),
],
),
),
),

Give your Stack a fit: Stackfit.expand, so it expands to the Container size.
If this doesn't work you can try it with a BoxDecoration - found here https://medium.com/ariel-mejia-dev/make-an-image-with-opacity-layer-in-flutter-fca77e453731
decoration:
BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter:
ColorFilter.mode(Colors.black.withOpacity(0.2),
BlendMode.dstATop),
image: new NetworkImage(
'http://www.server.com/image.jpg',
),
),
),

Texts visibly stacked on each other in flutter

Widget build(BuildContext context) {
return Swipable(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
This is my code and i've been adjusting and readjusting for over 3hrs.. I just need the text to show on the image that can be swiped. Please help me. Thanks
image:

Hello I think what you are needing is to use a Stack Widget instead of a Column widget. When using Stacks you can use a Positioned widget to indicate exactly where you want your child widgets to be displayed inside of the stack as well.
Widget build(BuildContext context) {
return Swipable(
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Positioned(
top: 16,
right: 16,
child: Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
Happy Coding!

You can use this way
Widget build(BuildContext context) {
return Column(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
widget.urls,
fit: BoxFit.cover,
),
),
height: MediaQuery.of(context).size.height * 0.57,
width: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
widget.usernames,
style: TextStyle(color: Colors.orange),
),
),
),
],
);
//onSwipeLeft: () => _returnString(index),
}

Flutter container write text over background image

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"))
]
);
}

Flutter How to extend image in appbar?

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.

How can I correctly place a red oval in Flutter?

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),
),
),
),
),