I'm trying to leave the $ text in the top of the container, but even with FractionalOffset(1.0, 0.0) the $ text continues in the middle of the container.
What could be done to leave the $ in the top of the container?
body: new Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
alignment: new FractionalOffset(1.0, 0.0),
child: new Text(
'\$ ',
style: new TextStyle(
fontSize: 20.0,
fontFamily: 'Roboto',
color: new Color(0xFF26C6DA),
)
)
),
new Text(
'3,435.23',
style: new TextStyle(
fontSize: 35.0,
fontFamily: 'Roboto',
color: new Color(0xFF26C6DA)
),
)
],
),
),
new Text('general balance'),
],
),
),
Try giving your Row a CrossAxisAlignment of CrossAxisAlignment.start. Is this what you had in mind?
body: new Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'\$ ',
style: new TextStyle(
fontSize: 20.0,
fontFamily: 'Roboto',
color: new Color(0xFF26C6DA),
)
),
new Text(
'3,435.23',
style: new TextStyle(
fontSize: 35.0,
fontFamily: 'Roboto',
color: new Color(0xFF26C6DA)
),
)
],
),
),
new Text('general balance'),
],
),
),
To align RIGHT
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container()
],)
Related
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.
Am building a navigation Drawer in flutter, with some items on top and some items on the bottom of the drawer. But in ListView, am unable to add Column widget on the bottom of the Drawer. I had even tried expanded, but that didn't resolved the problem.
Drawer(
child: ListView(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
padding: const EdgeInsets.only(bottom: 10),
child: Stack(
alignment: Alignment.topRight,
children: <Widget>[
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 30),
CircleAvatar(
radius: 45,
child: Text(
'AC',
style: TextStyle(fontSize: 40),
),
),
],
),
),
],
),
),
Divider(),
Column(children: _drawerOptions),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
AppStrings.termsAndConditions,
style: TextStyle(
fontSize: 16.0,
color: Color.fromARGB(255, 39, 39, 39),
),
)
],
),
)
],
),
);
That last widget Column wrapped with Expanded was to put that Column at bottom of the Drawer, but that's not happening.
Can anyone suggest any solution?
You should do it the other way, put ListView inside Column using Expanded , here is the full working code.
Drawer(
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
padding: const EdgeInsets.only(bottom: 10),
child: Stack(
alignment: Alignment.topRight,
children: <Widget>[
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 30),
CircleAvatar(
radius: 45,
child: Text(
'AC',
style: TextStyle(fontSize: 40),
),
),
],
),
),
],
),
),
Divider(),
Expanded(child: ListView(children: _drawerOptions)),
Spacer(),
Text("Terms and conditions"),
],
),
),
I'm just stuck here. I've tried everything but nothing works for me. All I want is to position the Icon on the right of my Row.
Note: I've tried setting all widget inside the row into a Align Widget and handle the position of that Align widget, but nothing worked. The code below is retrieving this:
This arrow, should go to the end of the Row widget.
Here is my Code:
Row(
mainAxisAlignment: MainAxisAlignment.start, //change here don't //worked
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin:
EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0, right: 12.0),
width: 15.0,
height: 15.0,
decoration: BoxDecoration(
color: task.color, borderRadius: BorderRadius.circular(40.0)),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
task.title,
style: TextStyle(
color: Colors.black,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
Text(
'Duration: ${task.date}',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
Icon(Icons.navigate_next, color: Colors.black) // This Icon
],
),
One solution is to use the Spacer widget to fill up the space
https://docs.flutter.io/flutter/widgets/Spacer-class.html
Row(
mainAxisAlignment: MainAxisAlignment.start, //change here don't //worked
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin:
EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0, right: 12.0),
width: 15.0,
height: 15.0,
decoration: BoxDecoration(
color: Colors.red, borderRadius: BorderRadius.circular(40.0)),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"task.title",
style: TextStyle(
color: Colors.black,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
Text(
'Duration: ${somenum}',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
new Spacer(), // I just added one line
Icon(Icons.navigate_next, color: Colors.black) // This Icon
],
),
Here is what happens if you add it to the beginning of the Row.
you can add Spacer(), above the widget you want to put at the end.
Solutions:
Use Spacer:
Row(
children: <Widget>[
Text('1'),
Spacer(), // <-- Use 'Spacer'
Text('2'),
],
)
Use mainAxisAlignment:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
children: <Widget>[
Text('1'),
Text('2'),
],
)
Output (same for both):
Why don’t you use ListTile widget? Or wrapping Column with Expanded? I think that would be working.
I am using TabBar and a custom searchview, when I click inside TextField to search and keyboard pops up my all view hides, am attaching screenshots below. Is this flutter issue or I am doing wrong in my code. Please have a look at my code. without popping up keyboard my this is working fine.
return new Scaffold(
body: new Container(
// margin: EdgeInsets.all(10.0),
//color: Colors.white30,
child: new Column(
children: <Widget>[
new Container(
height: 70.0,
color: Theme.of(context).primaryColor,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Card(
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 3.0),
child: new Icon(Icons.search),
),
new Container(
width: MediaQuery.of(context).size.width - 100.0,
// Subtract sums of paddings and margins from actual width
child: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
// onChanged: onSearchTextChanged,
),
),
new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
// onSearchTextChanged('');
FocusScope.of(context).requestFocus(new FocusNode());
},),
],
),
)
))),
new Flexible(
child: new ListView.builder(
itemCount: productList == null ? 0 : productList.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Column(
children: <Widget>[
new Container(
margin: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Column(
children: <Widget>[
new Padding(padding: const EdgeInsets.only(top: 5.0)),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Container(
alignment: FractionalOffset.topLeft ,
width: 250.0,
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text(productList[index].name,
style: new TextStyle(color: Colors.black,
fontSize: 18.0, fontWeight: FontWeight.bold),
)
],
),
),
new Text("£"+productList[index].price.toString(),
style: new TextStyle(color: Colors.black,
fontSize: 18.0, fontWeight: FontWeight.bold
),),
],
)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start ,
children: <Widget>[
new Text(
productList[index].description,
overflow: TextOverflow.fade ,),
],
))
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new ListTileItemAddRemove(productList[index]),
new Padding(padding: EdgeInsets.only(bottom: 10.0))
],
)
],
),
),
new Divider(color: Colors.black,)
],
),
);
}),
),
],
)
),
);
when I click inside TextField all widgets disappears. please see below.
I think flutter widgets are resized when keyboard pops up, I've resolved this issue by setting value false of resizeToAvoidBottomPadding inside Scaffold. Issue has been resolved but still I am looking for the reason behind this issue.
return new Scaffold(
resizeToAvoidBottomPadding : false,
body: new Container(
-
-
-
-
}
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]),
)
],
)
],
),
),
),
),
);
}
}