adding rows and columns together using flutter - flutter

i am trying to add two-row and 4 columns, I added rows but couldn't add columns, I want them to take the same size so I used expanded()
here is a picture
here is what iam lokking for
i am done with rows but couldn't adds columns
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
title: Text("homepage"),
),
backgroundColor: Colors.yellowAccent[700],
body: SafeArea(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(75), // Image radius
child: Image.network('https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(15),
),
),
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(75), // Image radius
child: Image.network('https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(15),
),
),
],
),
),
),
);


Use GridView.
GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: [
...List.generate(
6,
(index) => ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: Container(
color: Colors.yellowAccent[700],
child: SizedBox.fromSize(
size: Size.fromRadius(75), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
),
)
],
),
Using Row and Column, you need to provide fixed height for each Row.
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) => Column(
children: [
SizedBox(
height: constraints.maxHeight * .3,
child: Row(
children: [
...List.generate(
2,
(index) => Expanded(
child: Container(
color: Colors.yellowAccent[700],
padding: EdgeInsets.all(12),
child: ClipRRect(
borderRadius:
BorderRadius.circular(20), // Image border
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
),
)
],
),
),
SizedBox(
height: constraints.maxHeight * .3,
child: Row(
children: [
...List.generate(
2,
(index) => Expanded(
child: Container(
color: Colors.yellowAccent[700],
padding: EdgeInsets.all(12),
child: ClipRRect(
borderRadius:
BorderRadius.circular(20), // Image border
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
),
)
],
),
),
],
),
),
),


return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
title: Text("homepage"),
),
backgroundColor: Colors.yellowAccent[700],
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9' ,
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
],
),
Column(
children: [
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
Expanded(
child: Container(
color: Colors.yellowAccent[700],
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(size), // Image radius
child: Image.network(
'https://t3.ftcdn.net/jpg/04/33/08/02/360_F_433080252_BWd42il6gVUmQaXIkASbUrHfKMV3fnqg.jpg',
fit: BoxFit.cover),
),
),
margin: EdgeInsets.all(margin),
),
),
],
),
],
),
),
),
);
}
}
this is the answer
I just added a column inside a row with expanded so it take the same size

Related

Texts visibly stacked on each other in flutter

Widget build(BuildContext context) {
return Swipable(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
This is my code and i've been adjusting and readjusting for over 3hrs.. I just need the text to show on the image that can be swiped. Please help me. Thanks
image:

Hello I think what you are needing is to use a Stack Widget instead of a Column widget. When using Stacks you can use a Positioned widget to indicate exactly where you want your child widgets to be displayed inside of the stack as well.
Widget build(BuildContext context) {
return Swipable(
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Positioned(
top: 16,
right: 16,
child: Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
Happy Coding!

You can use this way
Widget build(BuildContext context) {
return Column(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
widget.urls,
fit: BoxFit.cover,
),
),
height: MediaQuery.of(context).size.height * 0.57,
width: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
widget.usernames,
style: TextStyle(color: Colors.orange),
),
),
),
],
);
//onSwipeLeft: () => _returnString(index),
}

making the circular avatar show at the top of the screen

How can I make the circleavatar to be placed at the top of the container

you can use Stack for this. like:
...
return Stack(
children: [
Positioned.filled( child:
Scaffold(
appBar: ...
body: Column([
DecoratedBox(
...
)
]),
)),
Positioned(
top: 24,
child:
CircleAvatar( child:
CachedNetworkImage(
...
),
),
),
],
);
something like that.

Try below code hope its helpful to you.refer Stack class here
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 21),
child: Container(
height: 200,
width: double.infinity,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
margin: EdgeInsets.all(
16,
),
),
),
),
Container(
width: 100,
height: 90,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
child: CircleAvatar(),
)
],
),
Your result screen->

Flutter container write text over background image

I want to make a design like following
I build the base layout with background image. Following is the code to achieve that. Now i want to put "Grocery store" Text on top of this image and other widgets. How can i do that ?
Widget build(BuildContext context) {
return Container(
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
// child: ????
),
),
],
),
),
],
),
);}

child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
child: Text('Grocery store'),
//padding: <-- Using to shift text position a little bit for your requirement
),

Stack/Align is your friend.
Take a look here https://api.flutter.dev/flutter/widgets/Stack-class.html
Here is a basic example (based in your code):
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
color: Colors.red,
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(
"http://www.exampledomain.com/images/background.jpg"),
//fit: BoxFit.cover,
),
),
),
),
],
),
),
],
),
),
),
Align(
alignment: Alignment.center,
child: Text("Grocery store"))
]
);
}

Card with image on top and text below

Currently I have a card where the image fills the card because I have fit: BoxFit.fill. However I need text below my image. I've tried a few different ways to introduce the text,,Columns etc.. But to no available. The images are of different sizes loaded from the Internet so the fit property works well with the images.
Here is what I have so far. my build method:
#override
Widget build(BuildContext context) {
return Column(children: [
GestureDetector(
onTap: () {
},
child: Container(
width: 335,
height: 174,
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
),
),
]);
}
But I want to have text under the image like this design:
The process bar and timer are unnecessary.

You must place the image and text in a Column widget, in addition to specifying the image dimensions like this:
Column(children: [
GestureDetector(
onTap: () {},
child: Container(
width: 335,
height: 174,
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
children: [
SizedBox(
width: 335,
height: 110,
child: Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
),
SizedBox(height: 16,),
Column(children:[
Text('Title'),
Text('Subtitle')
])
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
),
),
]);

This worked for me unless you want the text to be overlay, then u gotta use a Stack() then wrap your text in a Positioned() widget:
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
children: [
Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
Text('Something'),
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
)

Accepted solution giving render overflow error, Above issue, can be solved using the Stack widget. I recommend using MediaQuery instead of hardcoded values.
SizedBox(
width: 335,
height: 174,
child: Stack(
children: <Widget>[
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
children: [
SizedBox(
width: 335,
height: 110,
child: Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
),
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
Positioned(
bottom: 0,
left: 10,
child: SizedBox(
height: 50,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Title'),
Text('Subtitle')
],
),
),
)
],
),
),
Output:

Create a Card widget and call it multiple times

So im trying to build a page with lots of images in it, right now im using Stack widget to show the images,
this is my code:
import 'image_description.dart';
class Gallery extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.white10,
elevation: 0,
leading: Container(
padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: InkWell(
child: Hero(
tag: 'back',
child: Image.asset(
'assets/images/wp_back_button_icon.png',
height: 250,
),
),
onTap: () {
Navigator.pop(context);
},
),
),
actions: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 20, 20, 0),
child: Hero(
tag: 'logo',
child: Image.asset(
'assets/images/wp_logo.png',
height: 250,
),
),
),
],
),
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text(
'AR Gallery',
style: TextStyle(fontSize: 30),
),
),
Container(
child: Text("Let's educate in the fun way"),
),
Expanded(
child: SizedBox(
height: double.infinity,
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 3,
children: <Widget>[
InkWell(
child: Stack(
children: <Widget>[
Container(
height: 120,
width: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image1',
child: Image.asset(
"assets/images/gallery/Image1.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageDescription()));
},
),
Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image2',
child: Image.asset(
"assets/images/gallery/Image2.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image3',
child: Image.asset(
"assets/images/gallery/Image3.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image4',
child: Image.asset(
"assets/images/gallery/Image4.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image5',
child: Image.asset(
"assets/images/gallery/Image5.png",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image6',
child: Image.asset(
"assets/images/gallery/Image6.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image7',
child: Image.asset(
"assets/images/gallery/Image7.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image8',
child: Image.asset(
"assets/images/gallery/Image8.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text('Title',
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
],
),
),
),
],
),
),
);
}
}
As you can see, i'm using a lot of repeated Stack widget manually.
Can I make that automated? like creating a Stack widget or something similar once, and then call it where it should be with different Title.
Regards, Slim

It is indeed possible, this is what we call a reusable widget.
You can create it in the same file or in a separate one. I would suggest creating a widgets folder containing a dart file (whatever you want to name it) that'll contain your reusable widget.
1- If you only want the title to be different each time it should be something like this:
class SpecialStack extends StatelessWidget{
final String title;
SpecialStack({this.title});
#override
Widget build(BuildContext context){
return Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image2',
child: Image.asset(
"assets/images/gallery/Image2.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text(title,
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
}
}
2- If you want the image to be different whenever you use your reusable widget, it should be something like this. (I provided this case because I saw you were using different image for each Stack):
class SpecialStack extends StatelessWidget{
final String title, image;
SpecialStack({this.title, this.image});
#override
Widget build(BuildContext context){
return Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: image,
child: Image.asset(
"assets/images/gallery/$image.jpg",
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text(title,
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
}
}
For the first case (only title is different),
You can just replace wherever you're using the Stack by this:
SpecialStack(title: "Your desired title")
For the second case (image and title are different):
SpecialStack(title: "Your desired title", image: "your_image_name")
I hope this helps. I tried to be as clear as possible.

keep your images in a list then map the list. and inside map define a Stack widget. it will automatically create the stacks of your list of images.

You should write one function return widget type. Every time you want to show image you can call it.
Ex
Widget showImage(String url, String text){
return Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Hero(
tag: 'Image8',
child: Image.asset(
"url,
fit: BoxFit.fitHeight),
),
),
),
Container(
padding: const EdgeInsets.all(5),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Text(text,
style: TextStyle(
backgroundColor: Colors.deepOrange,
color: Colors.white)),
),
)
],
),
}