I want to decorate a container with a single stripe down the middle with white on each side like in the picture, I'm guessing I need to use Linear Gradient but I am struggling to get it right.Any Ideas?
Single Stripe Pic
Easy, You need to create a container and make a child of it as Stack and further create a container with aligned it to center. Give it some width and decorate it with linear gradient that's all
Here's some code I've written to help you. Feel free to customize on top of it and use within your app. Cheers!
Container(
width: 200,
height: 150,
color: Colors.white,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
width: 50,
color: Colors.red,
),
)
],
),
);
Related
I am trying to get a text label with graphics over the image. Labels like new arrival, best seller, limited, on sale just like on the pic attached.
enter image description here
Here's what i think the skeletal layout would be :
return Stack(
children: [
Card(
color: Colors.black54,
child: Image.asset('assets/xyz.png'),
),
Align(
//for bottomRight
alignment: Alignment.bottomRight,
child: Image.asset(
'assets/fireimg.png',
), //can be an SVG converted to png
),
Align(
//for topLeft
alignment: Alignment.topLeft,
child: Image.asset(
'assets/label.png',
), //can be an SVG converted to png
),
],
);
Feel free to give the Padding of your choice.
it has so much code to write , so i will give some examples to achieve that output
in this image ,i mentioned 0 and one .
for all 1
solution 1
you can use image like this way
Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.amber,// added only for view this example
child:Image() // add Product image here
),
Positioned(
top: 20, //change according to your use case position
left: 0,// change according to your use case position
child: Container(
color: Colors.black, // added only for view this example
decoration: BoxDecoration(image: ),// add label image here
width: 100,
height: 50,
child: Row(
children: [Text('hi')],
),
))
],
)
solution 2
you can use custom paint for label layout
not that
in both solution you have to use stack and position widgets , you can control position according to your use case
for all 0
you can use RotationTransition widgets to achieve this
not that
you have to use stack and position widgets , you can control position according to your use case
for the vertical Text
use this example
String exText = "meta";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hi'),
),
body: Container(
width: 200,
height: 200,
color: Colors.amber,
child: Column(
children: exText.characters
.map((e) => Container(
child: Text('$e'),
))
.toList()),
),
out put will be
How to achieve following shape in flutter without using plugins? I want to implement the customized container using clippath. I'm trying to use lineTo() method. I did not get exactly this one.
try this package, clippy_flutter, using Point:
Point(
triangleHeight: 30.0,
edge: Edge.LEFT,
child: Container(
color: Colors.pink,
width: 100.0,
height: 100.0,
child: Center(child: Text('Point')),
),
),
and then stack them and overlap a little at the egde.
I have a rather easy problem, but which I cannot seem to solve efficiently.
So I have a row of a changing number of Containers with a centered Circle, for which I used a circle icon from the Font Awesome package. And what I want to do is to connect the sides of these circles so that they form a chain.
I though of creating a custom icon, a circle with a line to the side long enough to reach the next circle.
Another option would be to use Stack and manually place a line between the cirlces, but because the number of cicles is changing, I fear the that the line will overflow the circle boundries.
Any of ou have an idea how to solve this efficiently?
Edit:
So here is a picture of what I want it to be like:
Picture of the Chain
My Code right now is just
Row(
children: <Widget>[
Container(
child: Center( child: CircleIcon ),
),
Container(
child: Center( child: CircleIcon ),
), ...
You can just use Container for this. Really simple with Container.
Container{
height: 50, // give any height you need
width: 50, // give the same as height,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black
),
),
}
I am trying to make a layout as seen in the image in Flutter, but I don't get how to create a background with two colors and an overlapping button.
I don't know if there is a widget able to do this or need some code...
Any suggest or help will be great! (this was my very first post ever, sorry if there is something wrong about it!!)
Thanks.
Do something like this.
body: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 300,
color: Colors.grey,
),
],
),
Positioned(
top: 280,
left: 50,
right: 50,
child: RaisedButton(
color: Colors.white,
child: Text("Your Button"),
onPressed: () {},
),
)
],
),
you will get
Let me know if it works
One possible approach is to use a Stack. Set the background color to your grey (i think, color blind), add the white piece as an image positioned at the bottom. Lastly add your button, again positioned at the bottom.
On closer inspection of your image, I now see that what I thought was an image at the bottom was actuall just a color. All you need are two Container s and a button in a Stack. The first Container should fill the whole space, the second Container should have a height setting (be responsive here for multiple device sizes) and lastly add your RaisedButton.
I am loading a rectangle logo saved as a .jpg into a CircleAvatar in my App.
When I am restarting my App, the area where the logo is loading appears blue for a few seconds. Then the real logo appears.
This Widget is found within a Stack.
This is how I transform my 1080x1073 image into a round logo within Flutter.
Container(
width: size.width * 0.5,
height: size.width * 0.5,
child: CircleAvatar(
backgroundImage: AssetImage('assets/images/logo.jpg'),
),
),
Does this happen because my image is too big? How should I handle this problem?
P.S. I am testing this on Visual Studio Code.
By default the background color is set to blue, you can modify the property and it will show whatever color you assign to it.
Container(
width: size.width * 0.5,
height: size.width * 0.5,
child: CircleAvatar(
backgroundColor: Colors.red, //here
backgroundImage: AssetImage('assets/images/logo.jpg'),
),
),
This has more to do with the delay it takes to load an image. You can change the background color like Yudhishthir suggested if the color is the actual problem or you can pre-fetch the image so that the image loads before anything is built.
This answer describes how to do the image pre-fetch using the precacheImage function.
This Cookbook solution is designed for this situation. Just replace the CircularProgressIndicator with whatever you want to show before the image is loaded.
https://flutter.dev/docs/cookbook/images/fading-in-images
Had similar blue background then changed to InkWell:
child: InkWell(
onTap: () async {
myFunc();
},
child: Container(
width: 50,
height: 50,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(shape: BoxShape.circle),
child: Image.asset(
'assets/images/mybutton.png',
fit: BoxFit.cover,
),
),
),