Related
I have this simple form, with a textarea and buttons:
When I open the keyboard, I want to decrease the size of the textarea, like a responsive layout. If I close the keyboard, the textarea should fill the remaining screen space available.
desired effect: open / active keyboard
desired effect: closed/no keyboard
My intention is to make the components fill in the screen, regardless device resolution.
Can someone provide a valida example of it? I tried several implementations and I was not able to achive the desired effect.
UPDATE:
My current code for this screen:
new MaterialPageRoute(
builder: (context) {
return new Scaffold(
resizeToAvoidBottomPadding: true,
appBar: new AppBar(
title: new Text('Add new Grocery List'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.delete),
tooltip: 'Clear Grocery List',
onPressed: () {
this._promptRemoveGroceryBatchList();
},
),
]
),
body: new Container(
padding: const EdgeInsets.all(5.0),
child: new Form(
key: this._formGroceryBatchAdd,
child: new ListView(
children: <Widget>[
new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new TextFormField(
maxLines: 10,
autofocus: true,
decoration: new InputDecoration(
labelText: 'Item List',
hintText: 'Enter a grocery list',
contentPadding: const EdgeInsets.all(16.0)
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter at least one grocery item';
}
},
onSaved: (value) {
this._formBatchGroceryData = value;
},
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Text(
'One item per line. Use ":" to specifcy the amount.\n' +
'Example:\n' +
'Potatoes:12\n' +
'Tomatoes:6',
style: new TextStyle(fontSize: 12.0, color: Colors.black54),
),
),
],
),
),
new Container(
child: new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
child: new Text('Add Items'),
color: Theme.of(context).primaryColor,
textColor: Colors.white,
elevation: 4.0,
onPressed: () {
// ACTION GOES HERE
},
),
new RaisedButton(
child: new Text('Cancel'),
onPressed: () {
// ACTION GOES HERE
},
),
]
),
),
]
)
);
)
);
}
)
I'm afraid it can't be directly done using a TextField for the textarea because its size depends on the lines of text you have.
But you can simulate it by surrounding the TextField that allows unlimited lines with a Container.
This is a sample that could work for you:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Demo Home Page'),
),
body: new Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(4.0),
),
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, bottom: 20.0, right: 10.0),
child: new TextField(
maxLines: null,
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
),
),
),
],
),
);
}
}
TextFormField is not working properly, its blinking continuously and it doesn't allow me to write anything, as I tap on the TextFormField my keyboard appears for a second and disappear instantly. I am confused what wrong I have done with my code, I've matched my code with previous working code, but still getting this behaviour .
Here is my code.
class ComingSoonState extends State<ComingSoon> {
String language;
TextEditingController _textEdititingController ;
#override
void initState() {
_textEdititingController = new TextEditingController(); //Initialised TextEditingController
super.initState();
}
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final Size size = MediaQuery.of(context).size;
final formData = new Form(
key: widget._formKey,
child: new Container(
padding: const EdgeInsets.only(
left: 35.0,
right: 35.0),
child: new Column(
children: <Widget>[
new Theme(
data: theme.copyWith(primaryColor: Colors.black54),
child: new TextFormField(
controller: _textEdititingController, //ADDED CONTROLLER HERE
style: const TextStyle(color: Colors.black54),
decoration: new InputDecoration(
labelText: 'Amount',
labelStyle: const TextStyle(color: Colors.black54)
),
// validator: this._validateEmail,
validator: (val) {
return val.isEmpty
? "Please enter amount"
: null;
},
onSaved: (String value) {
// this._data.email = value;
this.language = value;
}
),
),
],
),
),
);
return Scaffold(
appBar: new AppBar(
leading: null,
title: const Text('Send Money', style: const TextStyle(
color: Colors.white
),
),
),
body: new Container(
color: Colors.grey[300],
child: new ListView(
children: <Widget>[
new Container(
child: new Column(
children: <Widget>[
new Container(
height: 60.0 ,
padding: const EdgeInsets.all(5.0),
child: new Card(
child: new Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text("Available balance in wallet", style:
new TextStyle(color: Colors.black54,
fontSize: 16.0
),),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text("123 KSH", style:
new TextStyle(color: Colors.blueAccent,
fontSize: 16.0
),),
),
],
),
),
) ,
new Container(
//height: 300.0,
padding: const EdgeInsets.all(5.0),
child: new Card(
child: new Container(
child: new Center(
child: new Column(
children: <Widget>[
formData
],
),
),
),
),
)
],
)
),
],
),
),
);
}
}
I added a floating action button that presents a dialog that will show what you entered into the TextField (using the controller). I'm not sure what form key you were passing in before but making the GlobalKey instance a member variable eliminates the keyboard present/dismiss issue.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String language;
TextEditingController _textEditingController;
final _formKey = GlobalKey<FormState>();
#override
void initState() {
_textEditingController =
TextEditingController(); //Initialised TextEditingController
super.initState();
}
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final Size size = MediaQuery.of(context).size;
final formData = Form(
key: _formKey,
child: Container(
padding: const EdgeInsets.only(left: 35.0, right: 35.0),
child: Column(
children: <Widget>[
Theme(
data: theme.copyWith(primaryColor: Colors.black54),
child: TextFormField(
controller: _textEditingController,
//ADDED CONTROLLER HERE
style: const TextStyle(color: Colors.black54),
decoration: InputDecoration(
labelText: 'Amount',
labelStyle: const TextStyle(color: Colors.black54)),
// validator: this._validateEmail,
validator: (val) {
return val.isEmpty ? "Please enter amount" : null;
},
onSaved: (String value) {
// this._data.email = value;
language = value;
}),
),
],
),
),
);
return Scaffold(
appBar: AppBar(
leading: null,
title: const Text(
'Send Money',
style: const TextStyle(color: Colors.white),
),
),
body: Container(
color: Colors.grey[300],
child: ListView(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Container(
height: 60.0,
padding: const EdgeInsets.all(5.0),
child: Card(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
"Available balance in wallet",
style: TextStyle(
color: Colors.black54, fontSize: 16.0),
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
"123 KSH",
style: TextStyle(
color: Colors.blueAccent, fontSize: 16.0),
),
),
],
),
),
),
Container(
//height: 300.0,
padding: const EdgeInsets.all(5.0),
child: Card(
child: Container(
child: Center(
child: Column(
children: <Widget>[formData],
),
),
),
),
)
],
)),
],
),
),
floatingActionButton: FloatingActionButton(
// When the user presses the button, show an alert dialog with the
// text the user has typed into our text field.
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the user has typed in using our
// TextEditingController
content: Text(_textEditingController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
),
);
}
}
I've noticed that Drawer of Scaffold.drawer only shows up when an AppBar of Scaffold is present.
But Instead of AppBar,I Used BottomAppBar present in BottomNavigationBar.
How do I get Drawer working with BottomAppBar?
Here's my code Below for which Drawer dosen't appear
class homieclass extends State<homie>{
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
backgroundColor: Colors.white70.withOpacity(0.9),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(onPressed: (){},backgroundColor: Colors.redAccent,child: ImageIcon(new AssetImage("ast/hello123.png")),),
bottomNavigationBar: BottomAppBar(child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,mainAxisSize: MainAxisSize.max,children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: (){}),IconButton(icon: Icon(Icons.message), onPressed: (){}),
],
),
),
body: new Column(
children: <Widget>[new SizedBox(height: 50.0, ),
Container(margin: EdgeInsets.only(left: 0.0),child: new Text("Events",textAlign: TextAlign.left,style: TextStyle(fontFamily: 'ssfr',fontSize: 35.0,fontWeight: FontWeight.bold),),)
, Container(margin: EdgeInsets.only(left: 10.0,right: 10.0) ,width: 360.0,height: 40.0,decoration: new BoxDecoration(color: Colors.blueGrey.withOpacity(0.2),
border: new Border.all(color: Colors.blueGrey.withOpacity(0.0), width: 2.0),
borderRadius: new BorderRadius.circular(10.0),),child: new Row(children: <Widget>[SizedBox(width: 10.0,),Icon(Icons.search,color: Colors.blueGrey.withOpacity(0.9),),Text(" Search",style: TextStyle(fontFamily: 'ssft',color: Colors.blueGrey,fontSize: 20.0),)],),)
,new SizedBox(height: 10.0,),new SizedBox(
height: 5.0,
child: new Center(
child: new Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
height: 2.0
,
color: Colors.redAccent.withOpacity(0.8),
),
),
),],
),drawer: new Drawer(
child: new ListView(
children: <Widget>[ListTile(title: Text("hello"),)],
),
),
),
);
}
It works perfectly for me. Here is a working example with a dedicated "Show Drawer" button in the bottom bar (the drawer can also be dragged in from the left):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Playground',
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Body'),
),
bottomNavigationBar: Builder(builder: (BuildContext context) {
return BottomAppBar(
color: Colors.orange,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {
Scaffold.of(context).openDrawer();;
}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
},),
drawer: Drawer(
child: SafeArea(
right: false,
child: Center(
child: Text('Drawer content'),
),
),
),
);
}
}
Flutter version: Latest master build (though I'm also quite sure that it works with the beta version)
You can use Drawer, but you must supply a DrawerController, and also arrange for the drawer to overlay your other content. This is easy to do with a Stack. Its important that the stack hold a non-transparent container, otherwise you'll get rendering artifacts when the draw slides in and out. Scaffold doesn't require this, however, annoyingly, it also rebuild the other content as the draw moves (exactly the type of thing they've tried to avoid).
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutterui/util/layout_util.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) =>
MaterialApp(title: 'Flutter Playground',
home: Material(child:DrawerStack(body: body(), drawer: _drawer())));
}
Drawer _drawer() =>Drawer(
child: SafeArea(
child: Center(
child: Column(
children: [
Text('endDrawer content'),
Builder(builder:(context) => RaisedButton(
child: Text('Click', semanticsLabel: 'Click 2'),
onPressed: () {
Navigator.pop(context);
},
)),
],
),
),
),
);
Widget body() => Container(
decoration: BoxDecoration(color: Color.fromARGB(255, 255, 255, 255)),
child: SafeArea(
child: Center(
child: Column(children: [
Text('Body'), // style:TextStyle(fontSize: 14.0,color: Colors.black)),
Builder(builder:(context) => RaisedButton(
child: Text('Open drawer'),
onPressed: () {
(context.ancestorWidgetOfExactType(DrawerStack) as DrawerStack).openDrawer();
// DrawerStack.of(context).openDrawer();
})),
]))));
class DrawerStack extends StatelessWidget {
final GlobalKey<DrawerControllerState> _drawerKey =
GlobalKey<DrawerControllerState>();
final drawerScrimColor = Color.fromARGB(90, 100, 100, 128);
final double drawerEdgeDragWidth = null;
final DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start;
final Widget body;
final Drawer drawer;
DrawerStack({Key key, this.body, this.drawer}) : super(key: key);
void openDrawer() {
_drawerKey.currentState?.open();
}
#override
Widget build(BuildContext context) => Stack(
children: [
// body
body,
DrawerController(
key: _drawerKey,
alignment: DrawerAlignment.end,
child: drawer,
drawerCallback: (_){},
dragStartBehavior: drawerDragStartBehavior,
//widget.drawerDragStartBehavior,
scrimColor: drawerScrimColor,
edgeDragWidth: drawerEdgeDragWidth,
),
],
);
}
You can openDrawer of global key from the flutter itself to do the job.
Scaffold.of(context).openDrawer() / Scaffold.of(context).openEndDrawer();
scaffoldKey.currentState.openDrawer(); / scaffoldKey.currentState..openEndDrawer();
Case 1
bottomNavigationBar:BottomAppBar(
elevation: 10,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: GestureDetector(
onTap: () {
Scaffold.of(context).openDrawer();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.dashboard),
Text(
'DASHBOARD',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text(
'CHALLENGES',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: (){},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.public),
Text(
'Public',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.sentiment_satisfied),
Text(
'Settings',
style: TextStyle(color: Colors.black),
),
],
),
),
),
],
),
),
color: AppColors.WHITE,
);
Case 2
or you can scaffold key
class BottomBar {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
bottomNavigationBar: BottomAppBar(
elevation: 10,
shape: CircularNotchedRectangle(),
child: Container(
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: GestureDetector(
onTap: () {
scaffoldKey.currentState.openDrawer();
// scaffoldKey.currentState.openEndDrawer(); // use to open end drawer
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.dashboard),
Text(
'DASHBOARD',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text(
'CHALLENGES',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.public),
Text(
'Public',
style: TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: GestureDetector(
onTap: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.sentiment_satisfied),
Text(
'Settings',
style: TextStyle(color: Colors.black),
),
],
),
),
),
],
),
),
color: AppColors.WHITE,
));
}
}
1[This is how my page works. I want to get checkbox ticked and get the post paid number then can click the continue button. In my code checkbox is in between text and text form field Why i can not see my check box here and this is my code.]
new Container(
padding: const EdgeInsets.all(40.0),
child: new Form(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text(
"Are you a post paid customer",
style: new TextStyle(
color: Colors.blue,
fontSize: 25.0,
),
),
new Checkbox(
activeColor: Colors.blue,
value: _isChecked,
onChanged: (bool val){
onChanged(val);}
),
new TextFormField(
decoration: new InputDecoration(
labelText: "Post Paid Number",
),
obscureText: true,
keyboardType: TextInputType.text,
),
new Padding(
padding: const EdgeInsets.only(top: 60.0),
),
new MaterialButton(
height: 50.0,
minWidth: 150.0,
color: Colors.blue,
splashColor: Colors.blue,
textColor: Colors.white,
child: new Text("Continue"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new RegPage()),
);
},
),
Recreated your code and got it working.
You need to change _isChecked in Checkbox's onChanged like:
onChanged: (val) {
setState(() {
_isChecked = !_isChecked;
});
}),
Make sure to do it in setState or the change wont be reflected on UI.
My Code:
import 'package:flutter/material.dart';
import 'package:so_demo/sample_page.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
MyHomePageState createState() {
return new MyHomePageState();
}
}
class MyHomePageState extends State<MyHomePage> {
bool _isChecked = false;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('SO HELP'),
),
body: new Container(
padding: const EdgeInsets.all(40.0),
child: new Form(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text(
"Are you a post paid customer",
style: new TextStyle(
color: Colors.blue,
fontSize: 25.0,
),
),
new Checkbox(
activeColor: Colors.blue,
value: _isChecked,
onChanged: (val) {
setState(() {
_isChecked = !_isChecked;
});
}),
new TextFormField(
decoration: new InputDecoration(
labelText: "Post Paid Number",
),
obscureText: true,
keyboardType: TextInputType.text,
),
new Padding(
padding: const EdgeInsets.only(top: 60.0),
),
new MaterialButton(
height: 50.0,
minWidth: 150.0,
color: Colors.blue,
splashColor: Colors.blue,
textColor: Colors.white,
child: new Text("Continue"),
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (context) => new RegPage());
},
),
]),
),
),
);
}
}
I am trying to move my project from Java/Android studio to flutter but I have a stutter/lag issue when I try to change "Activity"...
As soon as I press the "Sign Up" button I want to transition to the sign up screen but when I do there is a stutter and the animation starts from the middle of the screen. The same is when I navigate back with the back button.
I started learning flutter yesterday so if you have any tips with how I can improve my layout that would also be a lot of help! :)
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
routes: <String, WidgetBuilder>{
"/SignUp": (BuildContext context) => new SignUp()
},
home: new Scaffold(
body: new WelcomePage(),
)
);
}
}
class WelcomePage extends StatelessWidget{
#override
Widget build (BuildContext context){
return new Container(
padding: const EdgeInsets.all(32.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(
child: new Container(
height: 60.0,
margin: const EdgeInsets.only(right: 5.0),
child: new RaisedButton(
onPressed: _SignIn,
color: Colors.blueAccent,
child: const Text('Sign In'),
textColor: Colors.white,
),
)
),
new Expanded(
child: new Container(
height: 60.0,
margin: const EdgeInsets.only(left: 5.0),
child: new RaisedButton(
onPressed: (){Navigator.of(context).pushNamed("/SignUp");},
color: Colors.blueAccent,
child: const Text('Sign Up'),
textColor: Colors.white,
),
)
)
],
),
new Row(
children: <Widget>[
new Expanded(
child: new Container(
height: 60.0,
margin: const EdgeInsets.only(top: 10.0),
child: new RaisedButton(
onPressed: _GoogleSignIn,
color: Colors.blueAccent,
child: const Text('Google Sign In'),
textColor: Colors.white,
),
)
)
],
)
],
),
);
}
void _signUp(BuildContext context){
}
void _signIn(){
}
void _googleSignIn(){
}
}
class SignUp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("SignUp"),),
body: new Container(
padding: const EdgeInsets.all(32.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
labelText: "Email",
),
keyboardType: TextInputType.emailAddress,
)
)
)
],
),
new Row(
children: <Widget>[
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
labelText: "Password",
),
obscureText: true,
)
)
)
],
),
],
),
),
);
}
}
I've tried your sample code and It is working fine now.
I've traced the reported bugs in GitHub and it seems that the issue's were closed.
Also, I've found this topic on YouTube interesting, Flutter Europe: Optimizing your Flutter App whenever you've encountered performance issues in your Flutter app.