I need to know is it possible to use ternary/if else inside flutter widgets.
I'm trying to create a buttonCreator widget which will take few parameters, one of which will be the background. I need to check whether the widget has background enabled or not. What i have is this but i have no idea how to use it in real dart code.
Container buildButton(String text, bool bg){
return new Container(
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
if (bg != true ? color: Colors.white : '')
),
padding: new EdgeInsets.all(15.0),
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: new Center(
child: new Text(
text, style: new TextStyle(color: Colors.white, fontFamily: 'Monsterrat')
)
),
);
};
I think this is what your question is actually about ?
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
home: new Home(),
));
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Flexible(
child: new MyContainer(
color: Colors.red,
),
),
new Flexible(
child: new MyContainer(
img: "http://www.clker.com/cliparts/F/v/O/6/E/c/cartoon-rubber-duck-hi.png",
),
)
],
),
),
);
}
}
class MyContainer extends StatelessWidget {
String img;
Color color;
MyContainer ({this.img,this.color});
#override
Widget build(BuildContext context) {
return this.img!=null? new Container(
decoration: new BoxDecoration(
image:new DecorationImage(
image: new NetworkImage(this.img)
)
),
): new Container(
decoration: new BoxDecoration(
color: this.color
),
);
}
}
Container buildButton(String text, bool bg){
return new Container(
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
color: bg ? Colors.white : null, // you can use ternary operator here
),
padding: new EdgeInsets.all(15.0),
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: new Center(
child: new Text(
text, style: new TextStyle(color: Colors.white, fontFamily: 'Monsterrat')
)
),
);
};
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
color: bg ? Colors.transparent : Colors.red, // you can use ternary operator here
),
Modified from AleksTi's answer. color property cannot be null.
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),
),
);
}
}
Hi friends I need to develop the screen like this one
But I am getting below view I tried the expanded but varied differently please help friends I am new to flutter I am not getting any idea how to achieve the required layout
Below is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'ColorsPage.dart';
void main() => runApp(new Login());
class Login extends StatefulWidget{
#override
State<StatefulWidget> createState() {
Login_State login_state() => Login_State();
return login_state();
}
}
class Login_State extends State<Login>{
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Builder(builder: (BuildContext context){
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
child: new Image.asset('assets/rural_post_logo.png'),
decoration: new BoxDecoration(
color: Colors.white
),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: new Text('SIGN IN',style: new TextStyle(
color: Colors.white
),),
decoration: new BoxDecoration(
color: secondarycolor
),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: new Text('SIGN UP',style: new TextStyle(
color: Colors.white
),),
decoration: new BoxDecoration(
color: primarycolor
),
alignment: Alignment(0.0, -1.0),
)
],
);
}),
),
);
}
}
The Column widget over the Container overwrites its normal behavior to be as big as possible and now it just wraps it's content as you noticed. You could give the Container a height property or wrap it in a Padding:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(70.0),
child:
new Container(
child: new Image.asset('assets/rural_post_logo.png'),
decoration: new BoxDecoration(
color: Colors.white
),
alignment: Alignment(0.0, -1.0),
),
),
new Column(
children: <Widget>[
new Container(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: new Text(
'SIGN IN',
style: new TextStyle(color: Colors.white),
),
),
decoration: new BoxDecoration(color: secondarycolor),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: new Text(
'SIGN UP',
style: new TextStyle(color: Colors.white),
),
),
decoration: new BoxDecoration(color: primarycolor),
alignment: Alignment(0.0, -1.0),
)
],
),
],
),
I want to scale the text in my flutter application according to various devices size or devicePixelRatio value. I know flutter should scale text according to devicePixelRatio value, so I change my code in that way, but it's not working in my code.
Here is my code:
class MyHomePage extends StatefulWidget {
#override
MyHomePageState createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
TextStyle style50 = new TextStyle(
inherit: true,
fontSize: 50.0,
color: Colors.white,
);
TextStyle style19 = new TextStyle(
inherit: true,
color: Colors.white,
fontSize: 19.0,
fontFamily: 'helvetica_neue',
);
TextStyle style15White = new TextStyle(
inherit: true,
color: Colors.white,
fontSize: 15.0,
fontFamily: 'helvetica_neue',
);
TextStyle style15Green = new TextStyle(
inherit: true,
color: Colors.green,
fontSize: 15.0,
fontFamily: 'helvetica_neue',
);
return new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/home_page_background.png"),
fit: BoxFit.cover,
),
),
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
margin: new EdgeInsets.only(top: 160.0),
child: new Text(
'JAHMAIKA',
textAlign: TextAlign.center,
style: style50,
),
),
new Container(
margin: new EdgeInsets.only(top: 230.0),
child: new FlatButton(
child: new Container(
padding: new EdgeInsets.only(
left: 45.0, right: 45.0, top: 15.0, bottom: 15.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: new BorderRadius.all(
new Radius.elliptical(40.0, 50.0)),
border: new Border.all(
color: Colors.white,
),
),
child: new Text(
'Create an account',
style: style19,
),
),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SignUpPage()),
);
}),
),
new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
child: new Text(
'Already have an account?',
textAlign: TextAlign.center,
style: style15White,
),
),
new GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SignInPage()),
);
},
child: new Container(
margin: new EdgeInsets.only(left: 16.0),
child: new Text('Login',
textAlign: TextAlign.center, style: style15Green),
),
),
],
),
),
],
),
)),
);
}
}
But this is not working. There is no change in the text font size in various devices. Please help me.
Have you tried computing the fontSize based on a proportion of MediaQuery.of(context).size.width ?
Set the sizes using a base device, and use it's width to calculate the other devices proportional sizes.
...
Widget build(BuildContext context) {
// 414.0 is the width of an iPhone 7plus
double fs = 50.0 * MediaQuery.of(context).size.width / 414.0;
// print("MediaQuery.of(context).size.width=${MediaQuery.of(context).size.width}");
// print("fs=$fs");
TextStyle style50 = new TextStyle(
inherit: true,
fontSize: fs,
color: Colors.white,
);
...
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.