1.TextField
onChanged: Feedback when change.
onSubmitted: Feedback when submitted.
TextDecoration:hintText and labelText.
To nest TextField inside Row, need to nest TextField inside Flexible because TextField doesn't not limited width.
The Row widget wants to determine the intrinsic size of its non-flexible children so it knows how much space that it has left for the flexible ones. However, TextField doesn't have an intrinsic width; it only knows how to size itself to the full width of its parent container. Try wrapping it in a Flexible or Expanded to tell the Row that you're expecting the TextField to take up the remaining space:
void main(){
runApp(new MaterialApp(home: new FieldWidget()),);
}
class FieldWidget extends StatefulWidget {
@override _FieldWidgetState createState() => _FieldWidgetState();
}
class _FieldWidgetState extends State<FieldWidget> {
String txtFld = " ";
String txtFld2 = " ";
String txtFld3 = " ";
@override Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.blue,
),
body: new Column(
children: <Widget>[
new TextField(
onChanged: (String txt){
setState((){
txtFld = txt;
});
},
decoration: new InputDecoration(hintText: "Add Anything to Change Listener",labelText: "Text Only"),
),
new Text(txtFld),
new TextField(
onSubmitted: (String txt2) {
setState((){
txtFld2 = txt2;
});
},
decoration: new InputDecoration(hintText: "Add Anything to Submit Listener",labelText: "Text Only"),
),
new Text(txtFld2),
new Row(
children: <Widget>[
new Text('Column1'),
new Flexible(
child: new TextField(
onChanged: (String txt3){
setState(() {
txtFld3 = txt3;
});
},
decoration: new InputDecoration(hintText: "This is flexible text",labelText: "Flexible"),
),
),
new Text(txtFld3),
],
//spaceBetween/Around/Evenly mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
],
),
);
}
}
2.Button
2 types: Raised and Flat
void main(){
runApp(new MaterialApp(home: new ButtonWidget()),);
}
class ButtonWidget extends StatefulWidget {
@override _ButtonWidgetState createState() => _ButtonWidgetState();
}
class _ButtonWidgetState extends State<ButtonWidget> {
String ButtonTxt = "Original";
String ButtonTxt2 = "Original";
void ChangeButton(Txt2) {ButtonTxt2 = Txt2;}
@override Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.blue,
),
body: new Column(
children: <Widget>[
new RaisedButton(onPressed: (){
setState(() {
ButtonTxt = "Changed";
});
},
child: new Text("Raise Button"),
),
new Text (ButtonTxt),
new FlatButton(onPressed: (){
setState(() {
ChangeButton("Changed too");
});
},
child: new Text(ButtonTxt2),),
]
),
);
}
}
3.Checkbox and Radio
Checkbox:
- Does not maintain state, depend on OnChanged callback when state changed
- Can have tristate (true, false, null)
OnChanged(bool new Value):
- Checkbox passes the new value to the callback but does not actually change state until the parent widget rebuilds the checkbox with the new value.
Checkbox With Slider and 2 Radiogroup
void main(){
runApp(new MaterialApp(home: new BoxandRadio()),);
}
class BoxandRadio extends StatefulWidget {
@override _BoxandRadioState createState() => _BoxandRadioState();
}
class _BoxandRadioState extends State<BoxandRadio> {
bool checkbox1 = false;
int rgrp1 = 0;
int rgrp2 = 0;
bool switch1 = true;
void rclick(clickvalue){
setState(() {
rgrp1 = clickvalue;
});
}
void rclick2(clickvalue){
setState(() {
rgrp2 = clickvalue;
});
}
//for switch and checkbox to share separate value void switch1m(switchvalue){
setState((){
switch1 = switchvalue;
});
}
@override Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.blue,
),
//it is good to wrap a container around it. Too late though body: new Column(
children: <Widget>[
new Checkbox(value: checkbox1,
onChanged: (bool cb1){
setState(() {
checkbox1 = cb1;
});
},),
new Text(checkbox1.toString()),
new Switch(value: checkbox1, onChanged: (bool currentswitch){switch1m(currentswitch);},),
new Text(checkbox1.toString()),
new Radio(value: 1,groupValue: rgrp1,onChanged:(int currentvalue){rclick(currentvalue);},),
new Radio(value: 2,groupValue: rgrp1,onChanged:(int currentvalue){rclick(currentvalue);},),
new Radio(value: 3,groupValue: rgrp1,onChanged:(int currentvalue){rclick(currentvalue);},),
new Text(rgrp1.toString()),
new Radio(value: 4,groupValue: rgrp2,onChanged:(int currentvalue){rclick2(currentvalue);},),
new Radio(value: 5,groupValue: rgrp2,onChanged:(int currentvalue){rclick2(currentvalue);},),
new Radio(value: 6,groupValue: rgrp2,onChanged:(int currentvalue){rclick2(currentvalue);},),
new Text(rgrp2.toString()),
]
),
);
}
}
Radio to List
https://www.youtube.com/watch?v=YSCvqDxvWB8
Radio in Rows
https://grokonez.com/flutter/flutter-radio-button-example
Github
https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart
4. Slider
void main(){
runApp(new MaterialApp(home: new Slideme()),);
}
class Slideme extends StatefulWidget {
@override _SlidemeState createState() => _SlidemeState();
}
class _SlidemeState extends State<Slideme> {
double slideval = 5.0;
@override Widget build(BuildContext context) {
return Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Slider(value:slideval,min:0.0, max:10.0,
onChanged: (double val1){
setState((){
slideval = val1;
});
},),
new Text("The Value is $slideval"),
],
),
),
);
}
}
Comments
Post a Comment