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)),
),
)
],
),
}
Related
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),
}
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->
How can I create button like below,
Try below code hope its helpful to you. used Stack widget here for that
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: circleRadius / 2.0),
child: Container(
height: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
margin: EdgeInsets.all(
16,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 2,
height: 2,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
),
],
),
),
),
),
Container(
width: 100,
height: 40,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(1),
child: DecoratedBox(
child: Center(
child: Text(
'Profile',
style:TextStyle(color: Colors.white,),
textAlign: TextAlign.center,
),
),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: Colors.blue,
),
),
),
)
],
),
Your Result screen->
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: TextButton(
child: Text(
"Profile",
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
),
you can use following code sample...change height according to your need...or use mediaquery for better result:
Container(
height: 275,
child: Stack(
children: [
Container(//container with background color
height: 250,
child: //other widgets
),
Positioned(
bottom: 0,
child: //button here
),
],
),
),
I am working in this app and I have a problem first the pic doesn't take the all size of the clipRRect, then I used the Ink.Image and the BoxFit.fitHeight, it okay but now the pic doesnt take the radius of the clipRRect..
sorry for my weak english, here is the code and screenshoot for the app.
please check the pics its in link.
thanks alot.
Widget foodCard() {
return Padding(
padding: EdgeInsets.all(10.0),
child: Container(
child: FittedBox(
child: Material(
color: Colors.white,
elevation:8.0 ,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
),
child: Row(children: [
Container(
width: 250, height: 250,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0)),
child: Ink.image(
height: 200,
fit: BoxFit.fitHeight,
alignment: Alignment.topLeft,
image: NetworkImage(
"https://images-gmi-pmc.edge-generalmills.com/087d17eb-500e-4b26-abd1-4f9ffa96a2c6.jpg"
)),)
),
Container(
child: Padding(padding: const EdgeInsets.all(8.0),
child: Column(children: [
Text("Recipe 1",
style: TextStyle(color: Colors.black),),
Text("Some data"),
ButtonBar(children: <Widget>[
FlatButton(
child: Text('Like'),
color: Colors.deepPurple,
onPressed: () {},
),
FlatButton(
child: Text('Dislike'),
color: Colors.deepPurple,
onPressed: () {},
),
],)
]),)
)
],)
)
),
));
}
before using fitbox.fithieght
after using it
I want the picture to be like this
copy and paste this Widget.
Padding(
padding: const EdgeInsets.all(16.0),
child: Material(
color: Colors.white,
elevation: 8.0,
shadowColor: Colors.blueGrey,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
child: FittedBox(
child: Material(
color: Colors.white,
elevation: 8.0,
shadowColor: Colors.blueGrey,
child: Row(
children: [
Container(
width: 250,
height: 250,
child: Ink.image(
height: 200,
fit: BoxFit.fitHeight,
alignment: Alignment.topLeft,
image: NetworkImage(
"https://images-gmi-pmc.edge-generalmills.com/087d17eb-500e-4b26-abd1-4f9ffa96a2c6.jpg"))),
Container(
padding: const EdgeInsets.all(8.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: [
Text(
"Recipe 1",
style: TextStyle(color: Colors.black),
),
Text("Some data"),
ButtonBar(
children: <Widget>[
FlatButton(
child: Text('Like'),
color: Colors.deepPurple,
onPressed: () {},
),
FlatButton(
child: Text('Dislike'),
color: Colors.deepPurple,
onPressed: () {},
),
],
)
]),
))
],
)))),
),
)
I want to fix my first container on Top when my card crossed on scrolling
And This is my code:
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new SizedBox(height: 25.0,),
new Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix",style: TextStyle(fontSize: 20.0)),
new SizedBox(width: 30.0,),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
);
I want to fix my first container and also change my color orange to green.
You can use stack like this:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final double heightOfFirstContainer = 100.0;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: [
Scaffold(
backgroundColor: Colors.green,
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: heightOfFirstContainer,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
),
),
Positioned(
child: new Container(
height: heightOfFirstContainer,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix", style: TextStyle(fontSize: 20.0)),
new SizedBox(
width: 30.0,
),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
),
],
),
);
}
}