Container(
padding:
EdgeInsets.only(left: 16, right: 20, top: 16, bottom: 16),
height: 68,
width: 200,
color: Colors.green,
child: Row(
children: [
Expanded(
child: Container(
child: Stack(
children: <Widget>[
Positioned(
// top: 16,
left: 0,
// height: 40,
// width: 40,
child: Container(
height: 36,
width: 60,
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
),
],
),
),
),
SizedBox(
width: 4,
),
Container(
width: 120,
height: 30,
color: Colors.red,
),
],
),
)
The black circle is wrapped by Expanded
But the space is invaded by others
how to prevent this??
I'd rather this give overflow to the right without clipping my stack widget.
You can use Positioned in a container instead of circle.
Container(
padding: EdgeInsets.only(left: 16, right: 20, top: 16, bottom: 16),
height: 68,
width: double.infinity,
color: Colors.green,
child: Stack(
children: [
Container(
height: 36,
width: 60,
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
Positioned(
left: 50,
top: 3,
child: Container(
width: MediaQuery.of(context).size.width-100,
height: 30,
color: Colors.red,
),
),
],
),
)
Output:
Related
how to create this with flutter ? please let me knw how to create like this category section using flutter because i want to create like this
i tried but i couldn't get the correct layout for that this is what i tried
Stack(children: [
Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xffCBCACD),
borderRadius: BorderRadius.circular(12),
),
width: 150,
height: 100,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Text(
indexCatName,
style: TextStyle(
fontWeight: FontWeight.bold),
),
Positioned(
top: 70,
left: 110,
child: Image(
width: 80,
image: NetworkImage(
'https://pizzafactory.lk/wp-content/uploads/2017/08/Pizza-Pollo-Alla-Diavola-300x300.png'),
),
),
],
)),
]);
Maybe like this :
Widget _test() {
return Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Color(0xffCBCACD),
borderRadius: BorderRadius.circular(12),
),
width: 150,
height: 100,
child: Stack(children: [
Positioned(
top: 20,
left: 15,
child: Text(
'123',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Positioned(
bottom: -30,
right: -15,
child: Image(
width: 100,
image:
NetworkImage('https://pizzafactory.lk/wp-content/uploads/2017/08/Pizza-Pollo-Alla-Diavola-300x300.png'),
),
),
]),
);
}
I try on the Back drop Filter in the Flutter widget but get a strange effect. On the one hand there is a blur, on the other hand the objects retain clear boundaries. What am I doing wrong?
child: Stack(
children: <Widget>[
Positioned(
right: 10,
top: 10,
child: Container(
width: 100,
height: 100,
color: Color(0xFFbfeb91),
),
),
Positioned(
bottom: 10,
left: 50,
child: Container(
width: 90,
height: 90,
color: Colors.green,
),
),
Text('Hello world'),
Container(
width: 180,
height: 180,
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 100,
height: 100,
padding: EdgeInsets.all(24),
// color: Color(0xFF55aaff),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black38,
),
),
),
),
),
),
],
)
I here is what I've got. Look at the green square - its bounds are clear, like we have 2 layers^ one is blured, and the other one (at the top) is NOT blured).
Picture with blur effect
And the same effect with letters 'Hello world'
You should give blur container position by margin as you are using stack as base widget. As you set postioned in above for two widget from top and left. so above two postined overleaped by blur container layout. thats why you getting blur screen. Try below code it will serve your purpose.
Stack(
children: <Widget>[
Positioned(
left: 10,
top: 10,
child: Container(
width: 100,
height: 100,
color: Color(0xFFbfeb91),
),
),
Positioned(
left: 10,
top: 120,
child: Container(
width: 90,
height: 90,
color: Colors.green,
),
),
Text('Hello world'),
Container(
margin: EdgeInsets.only(top: 10, left: 120),
width: 180,
height: 180,
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 100,
height: 100,
padding: EdgeInsets.all(24),
// color: Color(0xFF55aaff),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black38,
),
),
),
),
),
),
],
);
I have a widget meant to represent progress which goes
like this
I need to be able to put a name under a bubble, but when I do that like this:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.green,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
child: Center(
child: Icon(
Icons.check,
color: Colors.green,
size: 30,
),
),
),
Text("Test label"),
],
),
this happens.
I also tried putting the bars in a row with the circle:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height / 20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: mainColor,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
child: Center(
child: Icon(
Icons.check,
color: mainColor,
size: 30,
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height /20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
child: Container(
color: grey,
),
),
],
),
Text("Test label"),
],
),
This is better, but still creates problems if the text is bigger
How can I align the text below the circle without causing problems with the lines?
The code for the entire widget (sorry that it's so long, don't know how to show it otherwise):
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height / 20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.green,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
child: Center(
child: Icon(
Icons.check,
color: Colors.green,
size: 30,
),
),
),
Text("Test label"),
],
),Container(
padding: EdgeInsets.symmetric(
vertical:
MediaQuery.of(context).size.height / 20,
),
height:
1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 16,
child: Container(
color: Colors.grey,
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height / 20,
),
height: 1 + MediaQuery.of(context).size.height / 10,
width: 3 / 2 * MediaQuery.of(context).size.width / 8,
child: Container(
color: Colors.grey,
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.grey,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
),
Container(
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height / 20,
),
height: 1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 8,
child: Container(
color: Colors.grey,
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height / 20,
),
height: 1 + MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 8,
child: Container(
color: Colors.grey,,
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.grey,,
width: 1.5,
),
),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width / 10,
)
],
),
One solution I would suggest is that try Wrapping Text with ConstrainedBox and Container and limit the max width.
For example -
ConstrainedBox(
constraints: BoxConstraints(maxWidth: 50),
child: Container(
child: Text('Your Text'),
),
),
Thought that will move the text in the next line if it is too long to be placed in a single line.
I have tried to achieve this widget but nothing is working:
is it possible to create it?
You can try something like this, in case you are trying to put a widget over another.
Container(
width: 100,
margin: EdgeInsets.only(left: 16, right: 16, top: 16),
child: Stack(
children: [
Positioned(
top: 20,
child: Container(
height: 100,
width: 100,
color: Colors.red
)
),
Positioned(
top: 0,
left: 10,
right: 10,
child: Container(
height: 40,
color: Colors.green
)
),
]
),
)
I am experimenting on creating Instagram style of listview in Flutter, where the top horizontal scrolling is of stories and the scroll section right below is a vertical one for the posts. I am just using a listview now and not a listview builder. But I somehow do not get the vertical scrolling in my output. Also, in the upper listview, the container size takes the size 100 of the parent container but not the height 80. How do I fix that?
Here is the code for :
body: Column(
children: [
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.red,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
],
),
),
SizedBox(
height: 10,
),
ListView(
scrollDirection: Axis.vertical,
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
],
)
],
)
And here is my output:
Please check this code below.
Column(
children: [
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.red,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
],
),
),
SizedBox(
height: 10,
),
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height - 180,
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
],
),
),
)
],
)
Wrap vertical List View with an Expanded widget.
Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.red,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
SizedBox(
width: 10,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
],
),
),
SizedBox(
height: 10,
),
Expanded(
child: ListView(
scrollDirection: Axis.vertical,
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
Container(
height: 100,
color: Colors.green,
),
],
),
)
],
)