flutter all widgets on screen hides when keyboard appears - dart

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(
-
-
-
-
}

Related

How to implement boxes that fill the screen & I dont see my drawer

I'm trying to implement a UI design, something like this:
And that's what I've achieved so far:
I got stuck in the stage of filling the screen with boxes, I tried to implement this in multiple ways(expanded, containers etc), but the result didn't satisfy me.
How do i implement this?
And I also have another problem, when i create the drawer it work(i can scroll the screen to the right and the drawer navigation screen appears), But i can't see the drawer icon.
By the way, if you have suggestions for improving the code or things I could write better i'll be glad to hear that
My code:
class Sample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
body: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 2,
width: double.infinity,
color: Color.fromRGBO(50, 50, 205, 1),
),
Opacity(
child: Image.network(
'https://cdn.pixabay.com/photo/2015/04/23/21/36/auto-736794__340.jpg',
//half of the screen
height: MediaQuery.of(context).size.height / 2,
fit: BoxFit.cover,
),
opacity: 0.3,
),
SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 58.0),
child: Text(
'Parking App',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
],
),
),
],
),
],
),
);
}
}
There might be better ways to achieve this, but here's the solution with rows and columns:
import 'package:flutter/material.dart';
class SamplePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: Column(
children: <Widget>[
Image.network(
"http://i63.tinypic.com/16p2xu.jpg",
fit: BoxFit.cover,
height: screenHeight / 2,
),
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.account_balance),
SizedBox(height: 10),
Text("My Stats"),
],
),
),
Expanded(
child: Container(
color: Colors.indigo,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Icon(Icons.accessibility, color: Colors.white),
SizedBox(height: 10),
Center(
child: Text(
"Component",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
],
),
),
Expanded(
child: Container(
color: Colors.cyanAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.access_alarm),
SizedBox(height: 20),
Text("Workout"),
],
),
),
),
],
),
),
],
),
);
}
}
Result:
you can achieve similar layout using stack. i demonstrated as below.
Note: make sure that you are using full screen with content otherwise black screen will be there.
class Sample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 2,
width: double.infinity,
decoration: BoxDecoration(
color: Color.fromRGBO(50, 50, 205, 0.3),
image: DecorationImage(
image: NetworkImage(
'https://cdn.pixabay.com/photo/2015/04/23/21/36/auto-736794__340.jpg',
),
fit: BoxFit.cover,
),
),
),
],
),
Scaffold(
backgroundColor: Colors.transparent,
drawer: Drawer(),
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
title: new Text("Demo"),
centerTitle: true,
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: new Container(
decoration: BoxDecoration(
color: Colors.red
),
child: new Text("book"),
),
),
)
],
),
),
],
);
}
}

Expand the height of card based on dynamic data in flutter

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.

Card width match with parent : flutter

I am new in Flutter so I want to know that how can I set a width to match parent layout width
new Scaffold(
body: new Container(
decoration: new BoxDecoration(color: AppColors.hoBlue),
child: Padding(
padding: EdgeInsets.all(20.0),
child: new Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Stack(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.all(20.0),
child: Card(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0.0, 20.0,20.0),
child: Column(
children: <Widget>[
Card(
elevation: 10.0,
child: Padding(
padding: EdgeInsets.all(20.0),
child:
Text("Sign Up Here"),
),
),
TextField(
decoration: InputDecoration(
labelText: "Email",
hintText: "example#mail.com",
),
autofocus: true,
),
TextField(
decoration: InputDecoration(
labelText: "Password",
),
autofocus: true,
),
SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(
color: AppColors.hoBlue,
child: Text(
"Sign In",
style: TextStyle(
color: Colors.white,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
onPressed: () => print('Sign In'),
),
)
],
)),
),
),
),
],
)
],
),
],
)),
),
));
Result From Code Above
i need help to make card stack with parent like
Result I want
i already try with using stack but the result card parent card overlaping the first card.
I know about little bit on Expanded tag but Expanded expand view to both direction, i dont know how to do it. Help me if you know, Thanks in Advance.
You don't need Stack to get that view - it can be done using Column & Material widget.
return Scaffold(
body: new Container(
decoration: new BoxDecoration(color: Colors.blue),
child: new Center(
child: MergeSemantics(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Material(
elevation: 24.0,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Sign Up Here"),
),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 10.0, 20.0, 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: "Email",
hintText: "example#mail.com",
),
autofocus: true,
),
TextField(
decoration: InputDecoration(
labelText: "Password",
),
autofocus: true,
),
SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(
color: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
color: Colors.white,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
onPressed: () => print('Sign In'),
),
)
],
)),
],
),
),
],
),
),
)),
));
Output:
If you want to resize or alter the card view Then just put Card inside the Container view then adjust your container size.
This link will help you :https://stackoverflow.com/a/50017126/7418129
Just Put Card in Container
Padding(
padding: EdgeInsets.all(20),
child: Container(
height: 50,
width: double.infinity,
child: Card(
child: Align(
alignment: Alignment.centerLeft,
child: Text("Edit Profile")),
),
),
)
Use Material widget that will use as same as card do...and take always a full width and height as same as its parent class...

Flutter align button to bottom of Drawer

I'm trying to have a Widget align to the bottom of my NavDrawer while still keeping a DrawerHeader and a list at the top of the Drawer. Here's what I'm trying:
drawer: new Drawer(
child: new Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text('Top'),
new Align(
alignment: FractionalOffset.bottomCenter,
child: new Text('Bottom'),
),
],
),
),
The bottom text should be aligned to the bottom of the drawer, but It isn't!
You need to wrap your Align widget in Expanded.
drawer: Drawer(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text('Top'),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Text('Bottom'),
),
),
],
),
),
Edit:
Years on and there's a much easier solution:
return Drawer(
child: Column(
children: [
ListView(), // <-- Whatever actual content you want goes here
Spacer(), // <-- This will fill up any free-space
// Everything from here down is bottom aligned in the drawer
Divider(),
ListTile(
title: Text('Settings'),
leading: Icon(Icons.settings),
),
ListTile(
title: Text('Help and Feedback'),
leading: Icon(Icons.help),
),
]
);
A little late to the party, but here's my solution to this problem:
#override
Widget build(BuildContext context) {
return Drawer(
// column holds all the widgets in the drawer
child: Column(
children: <Widget>[
Expanded(
// ListView contains a group of widgets that scroll inside the drawer
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(),
Text('In list view'),
Text('In list view too'),
],
),
),
// This container holds the align
Container(
// This align moves the children to the bottom
child: Align(
alignment: FractionalOffset.bottomCenter,
// This container holds all the children that will be aligned
// on the bottom and should not scroll with the above ListView
child: Container(
child: Column(
children: <Widget>[
Divider(),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings')),
ListTile(
leading: Icon(Icons.help),
title: Text('Help and Feedback'))
],
)
)
)
)
],
),
);
}
This produces the below output where the UserAccountDrawerHeader and the text items can be scrolled around inside the drawer but the Divider and the two ListTiles stay static on the bottom of the drawer.
look whats the problem with your code you have added a Column as a Child to the Drawer so whatever you add in it are vertically placed and The height of Column is by default shrunk to its children's height and it gets larger as the child gets, so there's no point in adding an Align inside a Column
The Simpler Solution Would be to use an Expanded Widget that takes the remaining Space Look I have used a Column and added A widget above and below the Expanded Widget.
Drawer(
elevation: 1.5,
child: Column(children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.redAccent,
)),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('My Cart'),
leading: Icon(Icons.shopping_cart),
onTap: () {},
),
ListTile(
title: Text('My Orders'),
leading: Icon(Icons.add_shopping_cart),
onTap: () {},
),
ListTile(
title: Text('Logout'),
leading: Icon(Icons.exit_to_app),
onTap: () {})
],
)),
Container(
color: Colors.black,
width: double.infinity,
height: 0.1,
),
Container(
padding: EdgeInsets.all(10),
height: 100,
child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
])),
A simple approach would be to use Spacer() like:
Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
Text('Top'),
Spacer(), // use this
Text('Bottom'),
],
),
)
)
here is my solution of a vertical Row with icons in the end of the drawer.
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
DrawerHeader(
padding: const EdgeInsets.all(7),
decoration: BoxDecoration(
color: AppColors.menuHeaderColor,
),
child: buildHeader(),
),
AccountDrawerRow(),
ListTile(
leading: Icon(Icons.directions_car),
title: Text(translations.button.vehicles),
),
ListTile(
leading: Icon(Icons.calendar_today),
title: Text(translations.button.appointments,),
),
],
),
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
padding: EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SettingsPage())),
child: Icon(Icons.settings)),
Icon(Icons.help),
Icon(Icons.info),
],
),
),
),
),
],
),
);
}
I'd put it in a row and align all the stuff to bottom using crossAxisAlignment: CrossAxisAlignment.baseline
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.baseline,
children: <Widget>[
Text(
'12.00',
style: Theme.of(context).textTheme.headline2,
textAlign: TextAlign.start,
),
Text(
'USD',
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.start,
),
]),
Using Expanded widget to align widget to bottom of column parent widget
Column(
children: [
..other children
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
'Button',
style: TextStyle(
decoration: TextDecoration.underline,
fontSize: 18,
color: Colors.black),
),
),
),
],
),

Creating proper flutter UI

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]),
)
],
)
],
),
),
),
),
);
}
}

Resources