I want to achive output like below image can any once please help me on this, I have tried by self but not getting same out put below is my code:
Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Align(
alignment: Alignment.centerLeft,
child:Image(image: AssetImage('assets/contacts/Facebook.png')
),
),
width: 370,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(58),
color: const Color.fromARGB(255, 255, 87, 87),
),
),
),
),
Want Something Like This
You can use Stack widget to put widgets upfrontnof each other
You can use sth like this:
Stack(
children:[
Text(''),
Image('src')
]
)
Related
I have a design as you can see below and the question is how can I apply this notch effect on Arrow ? Is there any easy way to do it just like in Floating Action Button ? Thanks in advance.
I have created Dartpad, please look into this and do let me know if you need any help.
Dartpad Link : https://dartpad.dev/flutter?9bd55396e067e71a839851e18905f478
Code:
Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
height: 70,
child: Stack(alignment: Alignment.centerRight, children: [
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Container(
height: 70,
decoration: BoxDecoration(
color: Colors.cyan, borderRadius: BorderRadius.circular(8)),
),
),
Container(
width: 40,
height: 65,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 5)),
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.cyan,
child: const Icon(Icons.chevron_right),
),
)
]),
),
);
Output:
Hey you can achieve it in 2 way
1st one and simple - Create a box decoration widget and a circle shape widget with white border and put these together with Stack and fit as per your requirements.
2nd use Custom Clipper or Custom Paint and draw your shape.
I have two icons in a stack. I want one to hide the other, but instead it's semi-transparent and the other is shown behind it.
This is the code:
Stack(
children: [
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 10),),
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 20),),
],
)
This is how it looks:
Icons are more like SVG, use vector to draw shape. There are some empty spaces inside the icon to draw the path, and we can see the background though this. Also, it contains padding around it, You can use your assets to draw the UI.
We can wrap with another ColoredBox to hide the background icon, but it will get extra padding from IconData.
This snippet shows basic level structure.
SizedBox(
height: 24,
width: 24 * 1.7,
child: Stack(
alignment: Alignment.center,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
child: const Icon(
Icons.account_circle_rounded,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
child: const Icon(
Icons.account_circle_sharp,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
],
),
),
Widget renders bottom to top.
I want to add an icon to a card widget so I used the ImageIcon widget as below
Card(
color: colorPalette.cultured,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
children: <Widget>[
Text(label,style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15.0,fontFamily: 'Poppins'),),
Spacer(),
ImageIcon(AssetImage('assets/icons/call.png'),),
],
),
),
);
The icon I want to display is,
but what is displayed is,
the assets in the pubspec.yaml are indented properly as well.
Try below Code Hope its help to you . Just change your image on your need
you have add asset image in 2 Ways
Image.assets() - Documentation here
AssetImage()
Row(
children: [
Image(
image: AssetImage('assets/images/shop.png'),
width: 150,
height: 150,
),
Image.asset(
'assets/images/cycle.png',
width: 150,
height: 150,
),
],
),
Your Result Screen ->
You can use either of these for using asset images
Image.asset('image')
or
Image(image: AssetImage('image')) for using asset images
For achieving it with icon
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue),
child: Icon(
Icons.call,
color: Colors.white,
),
)
In my code, there is this CircleAvtar which I want to replace it with a big rectangular box. I am new to flutter I am finding it difficult to achieve this.
child: Card(
elevation: 3,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10,
),
// border: Border.all(width: 0.5),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: CircleAvatar(
radius: 35,
backgroundImage:
NetworkImage(expertiseSearchModel.userImageURL),
),
),
I want it to look like this :
If you can show us what your current code is giving the output maybe I can help you more. But As far as i understood this, you can simple use Image.Network() to show the image and remove the circular avatar
Try this, if it works if not lemme know I will edit it accordingly
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: whiteColor,
),
child: expertiseSearchModel.userImageURL.isEmpty
? CircleAvatar(
radius: 35,
child: SvgPicture.asset(
'assets/images/default_user_image.svg',
// height: screenUtil.setSp(80),
// width: screenUtil.setSp(80),
fit: BoxFit.contain,
),
)
: Image.network(expertiseSearchModel.userImageURL)
),
Inside your main container use the column as a child and put another container as a child and use the Image decoration property of the container to display pictures. You can change the border-radius of the child container to have those circular edges.
I am trying to align 2 Texts and an Image as a child of a FlatButton (like this) but somehow the elements don't align as they should.
I tried using Stack, Align, Rows and so on but I weren't really successful (I am also a beginner when it comes to dart or flutter)
new ButtonTheme(
minWidth: 171,
height: 176,
child:new Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(19),
gradient: new LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFF8F94FB),
Color(0xFF5D62D4)
]
)
),
child: FlatButton(
onPressed: () => handleButtonClick(),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
)
],
),
),
),
),
This is the result:Image
Replace your FlatButton with below code and see if it works for you.
FlatButton(
padding: const EdgeInsets.all(0),
onPressed: () => {
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(19)
),
child: new Stack(
children: <Widget>[
Container(
width: 109,
height: 109,
child: Align(
alignment: Alignment.bottomLeft,
child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
),
),
],
),
),
You can debug step by step. First, this is a technique that I use with me and my other fellows devs. In the child parameter, pass a Container, this container will receive a color, Colors.red for example, with that you can see how much size your container's area contain.
After that, if you want to centralize the content inside this Container, passa a Center as child, and the child of this Center widget, you can pass your Image, and define this Image's size.
child: Container(
color: Colors.red,
child: Center(
child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
),
),
Tell me if this worked for you.