I have code that uses GridView to create a list of items with number of columns based on devices orientation or width.
GridView.count(
crossAxisCount: columnCount(context),
childAspectRatio: 8.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
children: <Widget>[...textsWidgets],
);
The problem is, the children (textsWidgets) changes size upon resizing the window of the application during runtime. Is there a way to prevent children from changing size when resizing the window of the application during runtime?
you can use instead a wrap widget and use a sizedbox or a container as children and define the with and the height like this:
Wrap(
spacing : 10.0,
runSpacing : 10.0,
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
child: Center(child: Text('data'))
),
],
)
this is how it looks in small size window:
this is how it looks in big size window:
You can simply wrap a GridView with ConstrainedBox to prevent it from growing with the window, like:
ConstrainedBox(
constraints: BoxConstraints(maxWidth: 320),
child: GridView.count(…),
)
Related
So I am trying to have an image at the top followed by a list below it. Intially, the list is contracted. When the list expands, I want it to overlap the image.
Initial Position - here I want the image to be at the top
Final Position - this is correct
The Problem is - If I position the image to the top, the list also moves to the top (in the initial position) which is not what I want. Also, if I use a column to position the image at the top (and the list below it) then the list does not expand all the way up to the top; it stays (and expands) below the image.
#override
Widget build(BuildContext context) {
double maxHeight = MediaQuery.of(context).size.height;
return Scaffold(
//resizeToAvoidBottomInset: false,
//backgroundColor: Color(0xFFd8e3e3),
body: Align(
child: SingleChildScrollView(
//to avoid bottom overflow error
child: Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 5, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
//fit: StackFit.loose,
//alignment: Alignment.center,
children: [
// Positioned(
// top: 0,
// left: 0,
// right: 0,
Align(
alignment: Alignment(0, -1),
child: Hero(
tag: "imageHero",
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
child: Image.asset(
'assets/images/punjabi_egg_curry1.jpeg',
//height: screenHeight * 0.3,
//width: double.infinity,
alignment: Alignment.topCenter,
),
),
),
),
// ),
Center(
child: new ClipRect(
child: new BackdropFilter(
filter:
new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Card(
color: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: new Center(
//child: GestureDetector(
//onTap: _updateSize,
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
children: [
AnimatedContainer(
constraints: BoxConstraints(
maxHeight: maxHeight * 0.85),
height: _height,
duration: Duration(milliseconds: 300),
decoration: new BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(20),
//border: Border.all(color: Colors.black),
),
child: Steps(),
),
//),
ElevatedButton(
onPressed: _updateSize,
child: Text(buttonText),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
primary: kSilver,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20),
),
onPrimary: Colors.black,
textStyle: TextStyle(
color: Colors.black,
fontSize: 22,
),
),
),
],
),
),
),
),
),
),
),
// ),
],
),
],
),
),
),
),
//),
);
}
}
Wrap that widget with Positioned(top:5, child: // your widget ),
Try below code hope its help to you change your image on your need
Container(
height: 500,
child: Stack(
children: [
Container(
width: 150,
height: 150,
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/images/cycle.png',
),
),
),
),
Positioned(
top: 120,
left: 0,
right: 0,
child: Container(
height: 100,
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("List - $index"),
);
},
),
),
),
],
),
),
Your Result Screen ->
I am trying to achieve a shadow like this,
This is my attempt, but its not working:
SliverPadding(
padding: const EdgeInsets.only(top: 20, left: 10, right: 10),
sliver: SliverToBoxAdapter(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius:
20.0, // has the effect of softening the shadow
spreadRadius:
5.0, // has the effect of extending the shadow
offset: Offset(
20.0, // horizontal, move right 10
100.0, // vertical, move down 10
),
)
],
color: Colors.black,
),
height: 150,
width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
child: Center(
child: Text(
'Withdraw Money',
style: khomeStyle.copyWith(
fontSize: 18,
color: kWhite,
),
),
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(14.0))),
height: 30,
width: 130),
)),
),
//Container(height: 90, color: Colors.red),
],
),
),
),
);
I cannot understand why isn't it working and the entire shadow is coming behind my Stack. Hoping someone can help me with this problem, I couldn't find a solution elsewhere.
Goal: Implementing perfect sized Circle Button with visible radius and Image as a child
Screenshot to demonstrate:
As you can see from the above picture, I tried many solutions that are mentioned here by the community here
Including:
CircleAvatar
CircleAvatar(
child: Image.asset('assets/images/gucci.jpg')
)
ClipRRect
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
'assets/images/gucci.jpg',
height: 100.0,
width: 100.0,
)
)
Material widget with Ink.image as a child widget
Material(
elevation: 1.0,
shape: CircleBorder(),
clipBehavior: Clip.hardEdge,
color: Colors.transparent,
child: Ink.image(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover,
width: 120.0,
height: 120.0,
child: InkWell(
onTap: () {},
)
)
)
Any ideas on how to implement this design?
There are a lot of options for you. One of them is 'FloatingActionButton'.
SizedBox(
width: 60,
height: 60,
child: FittedBox(
fit: BoxFit.contain,
child: FloatingActionButton(
onPressed: () {},
shape: CircleBorder(
side: BorderSide(
color: Colors.black,
width: 1,
),
),
backgroundColor: Colors.white,
child: Padding(
padding: EdgeInsets.all(5),
child: Image.asset('assets/images/gucci.jpg'),
),
),
),
)
I would prefer it over Container since all the button's attributes like onPressed or tap animation are already implemented in FloatingActionButton and you don't need to use GestureDetector or InkWell.
Also you can use CircleBorder in any other Buttons or Widgets which accept a ShapeBorder.
I am guessing you want some padding and a border around the button.
SizedBox(
width: 100,
height: 100,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
border: Border.all(
width: 2,
color: Colors.black,
),
shape: BoxShape.circle,
),
child: Material(
elevation: 1.0,
shape: CircleBorder(),
clipBehavior: Clip.hardEdge,
color: Colors.transparent,
child: InkWell(
child: Ink.image(
image: AssetImage('assets/images/gucci.jpg'),
),
),
),
),
),
You can try using Container() and GestureDetector() for tap functionality, I guess this will do
Code
GestureDetector(
onTap: (){},
child: Container(
height: 120.0,
width: 120.0,
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 1.5),
borderRadius: BorderRadius.circular(80),
image: DecorationImage(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover
)
)
)
)
You can change the thickness of the border by playing with the width in border: Border.all(color: Colors.black, width: 1.5) and for circular container, make changes in this line borderRadius: BorderRadius.circular(80),. This will help.
Wrap your Container with Inkwell or GestureDetector.
Here is sample code:
InkWell(
onTap: (){},
child: Container(
width: 65,
height: 65,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(50.5)),
border: new Border.all(
color: Colors.black,
width: 2.0,
),
),
),
)
GestureDetector(
onTap: (){},
child: Container(
width: 65,
height: 65,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/gucci.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(50.5)),
border: new Border.all(
color: Colors.black,
width: 2.0,
),
),
),
),
I am trying to achieve a Flutter UI that has a look similar to that in this image;
Currently I am trying to achieve the border, basically a border with top and bottom cut out, possibly even cut out the top, bottom, and both sides to only have corners.
I have tried various CustomPaint methods but they were all very complex and had to be done per widget. I feel this should be simple but I cannot find a way.
How can I create a widget to wrap any given widget, say a FlatButton, or a Card or a TextSpan that will then create this border around its child?
Or even better, would it be possible to create a wrapper widget for the entire app/screen that will place a custom border around particular widgets? So if the widget tree contained any FlatButton's they would have the CustomBorder but say all Text's would not?
Custom border class
class TechBorder extends StatelessWidget {
final Widget child;
final Color borderColor;
final double borderWidth, leftBorderLength, rightBorderLength;
//This is just a sample, modify it as your requirement
//add extra properties like padding,color etc.
TechBorder(
{Key k,
#required this.child,
#required this.borderColor,
#required this.borderWidth,
#required this.leftBorderLength,
#required this.rightBorderLength,})
: super(key: k);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: borderColor, width: borderWidth),
right:
BorderSide(color: borderColor, width: borderWidth)),
color: Colors.transparent),
),
Container(
color: Colors.transparent,
child: Stack(children: [
Positioned(
top: 0,
left: 0,
child: Container(
color: borderColor,
width: leftBorderLength,
height: borderWidth)),
Positioned(
bottom: 0,
left: 0,
child: Container(
color: borderColor,
width: leftBorderLength,
height: borderWidth)),
Positioned(
right: 0,
child: Container(
color: borderColor,
width: rightBorderLength,
height: borderWidth)),
Positioned(
bottom: 0,
right: 0,
child: Container(
color: borderColor,
width: rightBorderLength,
height: borderWidth)),
])),
Padding(
padding: const EdgeInsets.all(10.0),
child: child,
)
],
);
}
}
Usage
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX18042265.jpg',
),
fit: BoxFit.fill)),
padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
child: TechBorder(
borderWidth:3.0,
leftBorderLength:25,
rightBorderLength:25,
borderColor: Colors.blueAccent,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 5, bottom: 5),
child: Text('SCREEN: Ox1b o1197hgk500',
style: TextStyle(
color: Colors.blueAccent, fontSize: 17))),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 5),
child: Row(
children: <Widget>[
Text('3518',
style: TextStyle(
color: Colors.blueAccent, fontSize: 17)),
Container(
margin: EdgeInsets.only(left: 15),
color: Colors.blueAccent,
height: 12,
width: 80),
SizedBox(width: 8),
Container(
color: Colors.blueAccent,
height: 12,
width: 100)
],
)),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 5),
child: Text('Other fields gos here...',
style: TextStyle(
color: Colors.blueAccent, fontSize: 17))),
])))
I'm trying to make this in flutter:
And my actual result:
My code is this:
new Container(
height: 150.0,
margin: const EdgeInsets.only(top: 16.0, bottom: 8.0),
child: new Stack(
children: <Widget>[
recantoCard,
recantoThumbnail,
],
),
)
final recantoThumbnail = new Container(
alignment: new FractionalOffset(0.0, 0.5),
margin: const EdgeInsets.only(left: 5.0, top: 10),
child: new Image(
image: new AssetImage("assets/nossos_restaurantes.png"),
height: 350.0,
),
);
final recantoCard = new Container(
margin: const EdgeInsets.only(left: 0.0, right: 48.0),
decoration: new BoxDecoration(
color: Color(getColorHexFromStr("E5E6E8")),
shape: BoxShape.rectangle,
),
child: new Container(
margin: const EdgeInsets.only(top: 10.0, left: 170.0),
constraints: new BoxConstraints.expand(),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("text",
style: TextStyle(
color: Colors.black,
fontFamily: 'Poppins',
fontWeight: FontWeight.w600,
fontSize: 20.0)),
new Text("texto:",
style: TextStyle(
color: Colors.black,
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
fontSize: 17.0)),
],
),
),
);
The image is an .png file and i need to overpass it into a Container and Stack, but the image always stay into 150 height container. How i can overpass the container with the image?
To make your image overpass the container you have to use Matrix4.translationValues(double x, double y, double z) class.
Use this class to whenever you need to overpass
transform: Matrix4.translationValues(0.0, 60, 0.0),
Container(
height: 150.0,
color: Colors.red,
child: Center(
child:Container(
height: 130.0,
width: 130.0,
transform: Matrix4.translationValues(0.0, 60, 0.0),
child: Image.asset('assets/image.jpg'),
)
),
)