I put an Image in a Stack because I want to have a x-Button in the upper right corner.
But I don't know, how to set the image like this.
It actual looks like this:
This is the code:
list.add(Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: Stack(children: [
Flexible(
child:
Image.network("${globals.api}/download/$nextPicture")),
Align(
alignment: const Alignment(0.95, -0.95),
child: IconButton(
icon:
const Icon(Icons.cancel, color: Colors.white, size: 25),
onPressed: () {
deleteSelectedImageRemote(nextPicture);
},
),
)
]),
)
]));
Do you have any suggestions, how to make it look like the Details page?
Thank you very much!
try this
list.add(Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: Stack(children: [
Container(
width:200,
height:200,
child:
Image.network("${globals.api}/download/$nextPicture")),
Align(
alignment: const Alignment(0.95, -0.95),
child: IconButton(
icon:
const Icon(Icons.cancel, color: Colors.white, size: 25),
onPressed: () {
deleteSelectedImageRemote(nextPicture);
},
),
)
]),
)
]));
Related
I want to know how to swipe down on a page to start the pop animation, but I want the animation to play as we're swiping down. For exemple, the "swipe from left to right" on iOS to pop a page is amazing, because the page that will pop follows the finger swiping LTR. And I want to do the same but vertically, and we would be able to close it from anywhere in the scaffold (not necessarily from the top edge). My animation has an hero animation so it might be harder.
Here's how it looks now :
And I want to have this animation playing, but swiping down, not swiping from the left. (Like exactly this animation, or one where the page goes down).
Here is the page I want to swipe to close :
class TreeDescription extends StatelessWidget {
Tree tree;
bool goBackArrow;
TreeDescription(this.tree, {this.goBackArrow = true});
#override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onVerticalDragStart: (details) => print("Do something"),
child: Column(
children: <Widget>[
Stack(
children: [
Hero(
transitionOnUserGestures: true,
tag: tree.imagePath,
child: Container(
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.transparent],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
stops: [0, 0.2]
),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
image: DecorationImage(image: AssetImage(tree.imagePath), fit: BoxFit.cover),
),
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
tree.name,
style: Theme.of(context)
.textTheme
.headline4
.copyWith(fontWeight: FontWeight.w600, color: Colors.white),
),
Text(
tree.species,
style: Theme.of(context)
.textTheme
.headline6
.copyWith(fontWeight: FontWeight.w600, color: Colors.white),
),
],
),
),
),
),
goBackArrow ? Positioned(
top: 30,
child: IconButton(
icon: Icon(Icons.chevron_left, color: Colors.white, size: 40,),
onPressed: () => Navigator.pop(context),
tooltip: 'Retour',
),
) : SizedBox.shrink()
],
),
Expanded(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Description :", style: Theme.of(context).textTheme.headline6.copyWith(color: Theme.of(context).primaryColor),),
Text(tree.description, textAlign: TextAlign.justify,),
SizedBox(height: 20,),
Text("La feuille du ${tree.name.toLowerCase()} :", style: Theme.of(context).textTheme.headline6.copyWith(color: Theme.of(context).primaryColor),),
SizedBox(height: 5,),
Row(
children: [
Container(
width: MediaQuery.of(context).size.width/2-40,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(tree.leafImagePath)
),
),
SizedBox(width: 5,),
Expanded(
child: Text(tree.leafDescription, textAlign: TextAlign.justify,)
),
],
),
],
),
),
),
)
],
),
),
);
}
}
I need to set height of a card based on the dynamic data.My card does not shows the entire content in the card.
Card(
child: Container(
padding: EdgeInsets.all(7.0),
child: Wrap(
direction: Axis.horizontal,
spacing: 200.0, // gap between adjacent chips
runSpacing: 0.0,
children: <Widget>[
Container(
height: 40.0,
decoration: new BoxDecoration(
color: Colors.grey[800],
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0),
),
),
child: Column(
children: <Widget>[
Align(
child: Container(
padding: EdgeInsets.fromLTRB(5, 0, 0, 0),
margin: const EdgeInsets.all(8.0),
child: Text(
contactUs.title,
style: Theme.of(context).textTheme.headline,
),
),
),
],
)),
Container(
padding: EdgeInsets.all(3.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Container(
child: Column(
children: <Widget>[
subtitlesLength > 0
? _listSubtitleSection(contactUs.subtitles)
: Container(),
],
),
),
),
Container(
child: Column(
children: <Widget>[
contactUs.addresses.length > 0
? _listAddressSection(contactUs.addresses)
: Container(),
],
),
),
contactUs.email != ''
? Container(
child: GestureDetector(
child: Text(
'Email: ' + contactUs.email,
style: new TextStyle(
color: Theme.of(context).primaryColor,
height: 1.5,
decoration: TextDecoration.underline,
),
),
onTap: () {
_launchURL(contactUs.email);
},
),
)
: Container(),
Container(
alignment: Alignment.centerLeft,
margin: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
child: Container(
child: Column(
children: <Widget>[
contactUs.links.length > 0
? _listLinksSection(contactUs.links)
: Container(),
],
),
),
),
Container(
child: Column(
children: <Widget>[
Divider(
color: Theme.of(context).accentColor,
),
FlatButton(
color: Colors.white,
child: Row(
children: <Widget>[
Icon(Icons.place,
color:
Theme.of(context).primaryColor),
Text(
'Show on maps',
style: TextStyle(
color:
Theme.of(context).primaryColor),
),
],
),
onPressed: () {
launchMap(contactUs.map);
}),
],
),
),
],
),
),
],
),
),
)
I am getting half of my data loaded in the card, remaining content is not displayed. I tried to place height for the container inside the card, but that is not working.
I need help to sort this out. Any help is appreciated.
Thanks in advance.
Removing the itemExtent property of listView builder solved the issue.
I am having some troubles to position 2 buttons in a card in Flutter.
I had this:
But I want this:
My code for the buttons of this card is:
new ButtonTheme.bar(
child: new ButtonBar(
alignment: MainAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Column(
children: <Widget>[
new FlatButton(
child: Icon(
Icons.share,
color: Colors.white,
),
color: Color.fromRGBO(68, 153, 213, 1.0),
shape: CircleBorder(),
onPressed: () {
Share.share(
data[index]["link"],
);
},
),
],
),
Column(
children: <Widget>[
FlatButton(
color:
Color.fromRGBO(161, 108, 164, 1.0),
child: const Text('Read Article'),
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(
30.0)),
textColor: Colors.white,
onPressed: () {
launch(data[index]["link"],
forceWebView: false);
},
),
],
)
],
),
],
),
From the documentation
ButtonBar.children : The buttons to arrange horizontally
I think you are doing a lot of unnecessary stuff, to get the result just put the buttons inside ButtonBar without extra layout widgets like Row and Column
here is the code :
ButtonTheme.bar(
child: new ButtonBar(
alignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
child: Icon(
Icons.share,
color: Colors.white,
),
color: Color.fromRGBO(68, 153, 213, 1.0),
shape: CircleBorder(),
onPressed: () {},
),
FlatButton(
color: Color.fromRGBO(161, 108, 164, 1.0),
child: const Text('Read Article'),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
textColor: Colors.white,
onPressed: () {},
),
],
),
),
You can use a different alignment on your ButtonBar or Row:
alignment: MainAxisAlignment.spaceBetween
I am trying to add multiple lines of content in the row with the button but there is some padding issue...How to separate padding for Text
return Container(
alignment: Alignment.topLeft,
height: 30.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(child: Text("${address1+', '+address2+', '+city+', '+state+', '+country}")),
IconButton(
padding: EdgeInsets.all(1.0),
icon: Icon(Icons.edit,size: 20.0,),
onPressed: () => print("a")
)
],
),
);
You add padding in any widget with Padding Widget
return Container(
alignment: Alignment.topLeft,
height: 30.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text("${address1+', '+address2+', '+city+', '+state+', '+country}")),
)
),
IconButton(
padding: EdgeInsets.all(1.0),
icon: Icon(Icons.edit,size: 20.0,),
onPressed: () => print("a")
)
],
),
);
I am trying to create the below image in to flutter. Trying to follow some examples but unable to get the right mix.
Plan is to connect to firebase in the next stage. So, for now I have to create a single card and then replicate it. But, I am having trouble to get the UI right thru trial and error. Any help looking in to this is much appreciated.
So far below is what I have.
import 'package:flutter/material.dart';
class liberPage extends StatefulWidget {
#override
_liberPage createState() => new _liberPage();
}
class _liberPage extends State<liberPage> {
final ShapeBorder shape;
#override
Widget build(BuildContext context) {
return new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Card(
elevation: 10.0,
shape: shape,
color: Colors.blue,
margin: EdgeInsets.only(top: 20.0),
child: new Column(
children: <Widget>[
new Icon(
Icons.ac_unit,
size: 100.0,
),
new Text(
"Test",
textAlign: TextAlign.left,
),
new Icon(
Icons.menu,
size: 100.0,
),
],
),
),
new Card(
elevation: 10.0,
color: Colors.yellow,
child: new Column(
children: <Widget>[
new Icon(
Icons.ac_unit,
size: 100.0,
),
],
),
)
]
)
]
),
);
}
}
What you need is a GridView with Stack widgets, not nested Rows and Columns. I have created minimal UI that may be of help.
class DishCardExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
children: List.generate(
10,
(i) => Card(
child: Column(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.height / 2.5,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://i.imgur.com/FtaGNck.jpg"),
fit: BoxFit.cover),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: FractionalOffset.topLeft,
child: CircleAvatar(
backgroundColor: Colors.redAccent,
radius: 15.0,
child: Text(
"NEW",
textScaleFactor: 0.5,
),
),
),
),
Align(
alignment: FractionalOffset.topRight,
child: Container(
color: Colors.blueAccent,
height: 35.0,
width: 35.0,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.account_circle),
Text(
"1P",
textScaleFactor: 0.5,
),
],
),
),
),
),
],
),
),
Center(
child: Container(
padding: const EdgeInsets.all(8.0),
alignment: FractionalOffset.bottomCenter,
child: Text(
"AWESOME DISH",
style: TextStyle(
fontWeight: FontWeight.w700,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
child: Text(
"Add To Cart",
style: TextStyle(color: Colors.grey[500]),
),
onPressed: () => null,
),
Text(
"\$5",
style: TextStyle(color: Colors.grey[500]),
)
],
)
],
),
),
),
),
);
}
}