How to give elevation to an image in Flutter? - dart

I have to implement elevation (like a shadow) on an image widget, but I couldn't find a solution to this. Is there a way to implement elevation to an image?
An image example of what I want to remove:
I used the Material widget, but it renders empty space!! The original image has no spaces, how can I remove them?

You can simply use the Material or the Card widget:
Center(
child: Material( // with Material
child: Image.network('https://placeimg.com/640/480/any'),
elevation: 18.0,
shape: const CircleBorder(),
clipBehavior: Clip.antiAlias,
),
),
Center(
child: Card( // with Card
child: Image.network('https://placeimg.com/640/480/any'),
elevation: 18.0,
shape: const CircleBorder(),
clipBehavior: Clip.antiAlias,
),
),
If you want more control on the Radius of the Image. Then you can use CircleAvatar:
Center(
child: Card(
child: CircleAvatar(
maxRadius: 54.0,
backgroundImage:
NetworkImage('https://placeimg.com/640/480/any'),
),
elevation: 18.0,
shape: const CircleBorder(),
clipBehavior: Clip.antiAlias,
),
),

Related

How to change the icon position in FloatingActionButton extended

The icon on FloatingActionButton extended is on left, how can i put the icon on right? after the text
floatingActionButton: FloatingActionButton.extended(
onPressed: (){},
label: Text("Next",),
icon: Icon(Icons.arrow_forward,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat
There isn't any direct way to do that.
But as a workaround, you could just pass a Row widget (Which contains a Text and Icon widgets) to label parameter.
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
label: Row(
children: <Widget>[Text("Proceed"), Icon(Icons.arrow_forward)],
),
icon: Container(),
),
Hope it helps.
I don't think you can do that with FloatingActionButton, but instead you can configure a RaisedButton to look very similar.
Just use it same as you would do it with FloatingActionButton.
floatingActionButton: RaisedButton(
child: Container(
height: 50.0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(width: 16.0),
Text('Next', style: TextStyle(color: Colors.white, fontSize: 25),),
const SizedBox(width: 8.0),
Icon(Icons.arrow_forward, size: 30.0, color: Colors.white,),
const SizedBox(width: 20.0),
]),
),
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
onPressed: () {
print('Do somenthing');
},
)
Hope this help.

Flutter - How to control profile image size in the drawer

I would like to control the profile image size, and get it rounded instead of oval as shown below.
Changing the height and/or the width values doesn't affect neither the size nor the ratio, also the weird thing is when I change the margin parameter it changes the oval shape radius.
new UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.white),
currentAccountPicture: new Container(
margin: const EdgeInsets.only(bottom: 40.0),
width: 10.0,
height: 10.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
"https://example.com/assets/images/john-doe.jpg",
),
),
),
),
accountName: new Container(
...
),
accountEmail: new Container(
...
),
onDetailsPressed: () {
...
},
),
What am I doing wrong ?
Update: The above way of doing is a workaround to the CircleAvatar that didn't give any control on the image size. If you tried CircleAvatar in some different way that gives control on image size, please share it to help.
Use This code for network image:
new CircleAvatar(
radius: 60.0,
backgroundColor: const Color(0xFF778899),
backgroundImage: NetworkImage("Your Photo Url"), // for Network image
),
Use this for asset Image:
new CircleAvatar(
radius: 60.0,
backgroundColor: const Color(0xFF778899),
child: new Image.asset(
'images/profile.png',
), //For Image Asset
),
If you use backgroundImage as the image provider for CircleAvatar then changing the radius property indeed has no effect. From the source circle_avatar.dart it can be observed the image is being rendered as BoxFit.cover DecorationImage(image: backgroundImage, fit: BoxFit.cover) - and in user_accounts_drawer_header.dart the currentAccountPicture is hardcoded to be a 72.0 pixel SizedBox so the image will always be 72.0px in dimensions.
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/user_accounts_drawer_header.dart#L57
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/circle_avatar.dart#L203
Hopefully the Flutter team adds some level of control to this in the future.
Not an answer, just more info that hopefully helps someone.
Try This:
import 'package:flutter/material.dart';
class AppDrawer extends StatefulWidget {
#override
_AppDrawerState createState() => new _AppDrawerState();
}
class _AppDrawerState extends State<AppDrawer> {
#override
Widget build(BuildContext context) {
return new Drawer(
child: Center(
child: Column(
children: <Widget>[
new UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.white),
currentAccountPicture: new CircleAvatar(
radius: 50.0,
backgroundColor: const Color(0xFF778899),
backgroundImage:
NetworkImage("http://tineye.com/images/widgets/mona.jpg"),
),
),
],
),
),
);
}
}
This is the screenshot of output:
Wrap your image in a CircleAvatar widget. It’s made for such purposes.
You put the margin inside the Container of the image while you have to use the margin parameter of the UserAccountDrawerHeader, this is why your image became an oval:
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.white),
margin: EdgeInsets.only(bottom: 40.0),
currentAccountPicture: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image:
NetworkImage("https://via.placeholder.com/150"))),
),
accountName: new Container(
child: Text(
'Name',
style: TextStyle(color: Colors.black),
)),
accountEmail: new Container(
child: Text(
'Email',
style: TextStyle(color: Colors.black),
)),
),
You can create your own header:
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue
),
child: ListView(
children: [
return ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.asset('images/myImage.jpg'),
),
//These can go here or below the header with the same background color
Text("user name"),//customize this text
Text("useremail#example.com"),
//...additional header items here
],
)),
I found a solution!!! at least thats what worked for me
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
// Side menu
drawer: new Drawer(
child: GestureDetector(
onTap: () {},
child: ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text('Hymn +'),
accountEmail: new Text('johndoe#gmail.com'),
currentAccountPicture: new CircleAvatar(
backgroundImage: new NetworkImage(
'https://miro.medium.com/max/1400/1*uC0kYhn8zRx8Cfd0v0cYQg.jpeg'),
),
),
],
),
),
),
);
}
}
This works for me:
DrawerHeader(
decoration: BoxDecoration(color: Colors.blue),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/*CircleAvatar(
radius: 50.0,
backgroundColor: const Color(0xFF778899),
child: new Image.asset('assets/images/profile_image.png'), //For Image Asset
),*/
Container(
height: 110,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.asset('assets/images/profile_image.png'),
),
),
//These can go here or below the header with the same background color
//Divider(height: 1.0, thickness: 1.0, color: Colors.black),
SizedBox(height: 9.0),
Text("user name"),
//...additional header items here
],
),
),

Using a SVG as a background image for a Container

From this question I am using Flutter's SVG package (flutter_svg) to render a SVG image.
I want to use the SVG as a Container background with Text in the middle.
This is the code I have so far:
Container(
decoration: BoxDecoration(
image: DecorationImage(image: SvgPicture.asset(
'assets/example.svg',
),),
),
children: <Widget>[
Text('Welcome to my Flutter App',
style: Theme.of(context).textTheme.display1.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold
)
),
],
)
The problem I am finding is that SvgPicture is not an ImageProvider so I can't add the BoxDecoration to get a background image.
Is there a way to then use SvgPicture as a Container's box decoration or background?
The exact way to use an SvgPicture is like this:
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
SvgPicture.asset(
'assets/images/splash/background.svg',
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
Container(
child: Column(
children: <Widget>[Expanded(child: _createLogo())],
),
),
],
),
);
}
how about using a stack() and build everything on top of that. That is how I have done it with just an image as a background for the full viewport.
You can also use flutter_svg_provider
Like this :
import 'package:flutter_svg_provider/flutter_svg_provider.dart';
Container(
decoration: BoxDecoration(
image: DecorationImage(image: Svg(
'assets/example.svg',
),),
),
)

How can I add text to a card that has been filled with an image for its background?

I have added a card to my homepage and used an "Image.asset" in order to give it a background image. I now want to add some text on top of this card but have been unable to figure out how to do so...any help would be much appreciated!
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.asset(
'assets/images/image.png',
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.symmetric(vertical: 9, horizontal: 10),
),
Above is the code that I have so far (without any of the text that I want to add).
This for example implement Stack
Stack(
children: <Widget>[
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.network(
'https://source.unsplash.com/WLUHO9A_xik/900x900',
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.symmetric(vertical: 9, horizontal: 10),
),
Positioned(
right: 0.0,
bottom: 0.0,
child: Text('Example'),
)
],
),
Checkout Stack or Container with a decoration.
You can overlap Widgets with Stack.
You can set your AssetImage with BoxDecoration of Container.

flutter bottomsheet with notch (similar to bottomNavigationBar: BottomAppBar's shape property)

question 1:
how to add a notch to flutter bottom sheet around the floatingactionbutton, so that it looks like a bottomappbar (with shape of CircularNotchedRectangle()) but behave like bottomsheet (can drag to dismiss)
question 2:
how to make a bottomsheet non-dismissible yet still draggable. (similiar to android's bottomsheet)
question 3:
bottomsheet peek height, bottom sheet that dismissible, but also expandable (again, just like android bottomsheet)
is it possible to achieve what I've listed above? or i'm out of luck and have to use a 3rd party library? (if there's one?)
hope its help :)
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.startDocked, //specify the location of the FAB
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: () {
print('OK');
},
tooltip: "start FAB",
child: Container(
margin: EdgeInsets.all(15.0),
child: Icon(Icons.add),
),
elevation: 4.0,
),
bottomNavigationBar: BottomAppBar(
child: Container(
color: mycolor,
height: 35,
),
)
);
You can use this technique too
Scaffold(
backgroundColor: myBackgroundColor,
floatingActionButtonLocation: FloatingActionButtonLocation.startDocked, //specify the location of the FAB
floatingActionButton: CircleAvatar(
radius: 32,
backgroundColor: myBackgroundColor,
child: Padding(
padding: EdgeInsets.all(1),
child: FloatingActionButton(
backgroundColor: MyColor.textColor,
onPressed: () {
print('OK');
},
child: Container(
margin: EdgeInsets.all(15.0),
child: Icon(Icons.add),
),
elevation: 4.0,
),
),
),
bottomNavigationBar: BottomAppBar(
child: Container(
color: MyColor.textColor,
height: 35,
),
)
);

Resources