So I want to show a Pinterest style board in my app but without StaggeredGridList, but through the normal, Container and Row/Column widgets.
Here is an image:
So at first, I tried to use Expanded to make container with the higher height, take up the height and the other take up the width, but this approach doesn't work when you want pictures below each other. So please post your code as an answer below.
My Code:
Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 15, bottom: 12),
// parent container housing all other widgets
child: Container(
height: 220,
child: Column(
children: [
// both the pics and colours
Expanded(
child: Row( // row
children: [
// vertical pic
Container( // first child
width: 180, // give it a width, it takes up the height of parent since it is wrapped with an expanded widget
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
15.0,
),
image: DecorationImage(
image: NetworkImage(storiesList[0]),
fit: BoxFit.fill
)
),
),
// spacing between vertical pic and horizontal pic
SizedBox( // second child
width: 12,
),
// banner pic and colours
Expanded( // thrid child [consists a column with children ]
child: Column(
children: [
// banner pic
Container(
height: 165, // give it a height, it takes up the width of parent since it is wrapped with an expanded widget
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
15.0,
),
image: DecorationImage(
image: NetworkImage(storiesList[1]),
fit: BoxFit.fitWidth
)
),
),
],
),
),
],
),
),
],
),
),
)
],
)
Thanks a lot!!
Related
my idea is to create a card widget that has an image on the left and corresponding text data on the right side. The picture should always take the full height and 1/3 of the width (I used expanded with flex to get this. Not sure if this is the best way). The image should be placed in a stack in order to stack further widgets.
My problem is that I am not able to place the image in the stack without specifying a fixed height. I tried Positoned.fill but this did not work for me.
This is my code so far for the card:
Widget build(BuildContext context) {
return Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Row(
children: [
Expanded(
child: Stack(
children: [
Container(
// child: Positioned.fill(
// child: ClipRRect(
// borderRadius: BorderRadius.circular(15.0),
// child: Image(
// image: AssetImage("assets/eyes.jpg"),
// fit: BoxFit.cover,
// ),
// ),
// ),
),
],
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.grey,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("This is a test"),
SizedBox(height: 10),
Text("This is a test test"),
SizedBox(height: 10),
Text("This is a test test test"),
SizedBox(height: 10),
Text("This is a test test"),
SizedBox(height: 10),
Text("This is a test"),
],
),
),
),
),
],
),
);
}
Here is a picture of the current state. The image should take up the entire white area on the left side of the card.
Instead of adding a child image widget inside your container, you can add a decoration image to the container itself. Here's how you do it:
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage("url"),
),
),
),
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,
),
)
I figured I can draw ripple over an image by enclosing the image in Ink(decoration: BoxDecoration(image: ...)), but how can I do the same for Text?
This is supposed to be a card with an image on top and a title and some other information at the bottom:
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final post = _postModel.post;
return Material(
color: theme.colorScheme.background,
child: InkWell(
onTap: () {},
splashColor: Colors.red,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (post.imageUri != null)
// This image IS covered by the ripple (what I need)
AspectRatio(
aspectRatio: 5 / 3,
child: Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3),
image: DecorationImage(
image: NetworkImage('https://picsum.photos/700'),
fit: BoxFit.cover,
),
),
),
),
// This must be underneath the ripple, but isn't.
Text(post.title, style: theme.textTheme.headline5),
Container(
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 5),
color: Colors.transparent,
height: 60,
child: Row(
children: <Widget>[
// This is also covered by the ripple
Ink(
height: 35,
width: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://picsum.photos/100'),
),
),
),
SizedBox(width: 5),
// This must be underneath the ripple but isn't
Ink(
// decoration: Decoration,
child: Text(
post.author,
style: theme.textTheme.caption,
),
),
Spacer(),
],
),
),
],
),
),
),
);
}
When I press, the ripple covers both images as expected, however, I can't figure out how to make the ripple cover the text widgets as well. I tried wrapping the text in an Ink widget (the last one), but it doesn't work - the text is still displayed over the ripple.
Unpressed:
Pressed (the text is visible):
I am very new at Flutter and was confused with how to use the widgets to create a sustainable replacement for Native Androids, RelativeLayout and ConstraintLayout but was not able to use the Column, Row widgets appropriately. I am trying to build this layout but wasn't able to up until now.
I have started by adding a container for the entire thing, then a column for every 'block' and then use Rows/Containers for the rest of them. Here is the code I have written up until now but this doesn't show anything:
Container(
height: 250,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: colorItems // a color list at global scope with 2 items
),
color: Colors.black
),
)
],
),
),
)
Edit
Please give an explanation of your hierarchy of widgets like this:
Container
- Column
- Row
I added a full example of what you are trying to get:
Below is how the widget tree should look like:
WIDGET HEIRARCHY
Container
- Column
- Container
- SizedBox
- Expanded
-Row
- Container
- SizedBox
-Expanded
- Column
- Container
- SizedBox
- Expanded
- Row
- Expanded
- Container
- Expanded
- Container
- Expanded
- Container
CODE
class StackOver extends StatelessWidget {
final BoxDecoration _boxDecoration = BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
15.0,
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Tab bar',
),
),
body: Padding(
padding: const EdgeInsets.all(10.0),
// parent container housing all other widgets
child: Container(
height: 250,
child: Column(
children: [
// frist container [give it a height, it takes up the width of the parent]
Container(
height: 80,
decoration: _boxDecoration,
),
// add spacing
SizedBox(
height: 15,
),
// second child of the column [consists of a Row with children]
Expanded(
child: Row( // row
children: [
Container( // first child
width: 80, // give it a width, it takes up the height of parent since it is wrapped with an expanded widget
decoration: _boxDecoration,
),
// add spacing
SizedBox( // second child
width: 15,
),
Expanded( // thrid child [consists a column with children ]
child: Column(
children: [
Container(
height: 80, // give it a height, it takes up the width of parent since it is wrapped with an expanded widget
decoration: _boxDecoration,
),
// add spacing
SizedBox( // second child
height: 20,
),
Expanded( // third child [consists of a row with 3 containsers]
child: Row(
children: [
Expanded( // first container
child: Container(
decoration: _boxDecoration,
),
),
// add spacing
SizedBox(
width: 15,
),
Expanded( // second container
child: Container(
decoration: _boxDecoration,
),
),
// add spacing
SizedBox(
width: 15,
),
Expanded( // third container
child: Container(
decoration: _boxDecoration,
),
),
],
),
),
],
),
),
],
),
),
],
),
),
),
);
}
}
OUTPUT
I have a profile page layout as its seperated by 2 and 1 positioned for avatar picture. my down container color, ı cant set it seems not working ıdk why. here is my code below:
body: new Stack(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
height: topWidgetHeight,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/9.jpg"),
fit: BoxFit.cover)
),
),
new Container(
color: Colors.red,
)
],
),
new Positioned(
child: new Container(
height: 150,
width: 150,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/0.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.all(Radius.circular(75.0)),
boxShadow: [
BoxShadow(blurRadius: 7.0, color: Colors.black)
],
),
),
left: (MediaQuery.of(context).size.width/2) - avatarRadius,
top: topWidgetHeight - avatarRadius,
)
],
)
the container is not appearing because you have not given any height and to container
please give it height and width and then try