Currently I have a listview of widgets and I stack a bottom button on the Top of the Stack to be always display. but when I tap on the textfield, the bottom button is push on the top, It's very ugly. How can I push the keyboard over the Button?
here is a code example:
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
),
body: new Stack(
children: <Widget>[
new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(100.0),),
new Card(
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new TextField(
controller: _controller,
decoration: new InputDecoration(hintText: "Enter an address"),
),
),
],
),
),
),
],
)
],
),
new Align
(
alignment: Alignment.bottomCenter,
child : new RaisedButton(
child: new Text("Button", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 18.0,)),
onPressed: (){
},
highlightElevation: 4.0,
highlightColor : Colors.white,
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
]
)
);
}
}
I would recommend putting the "Button" on the Bottom outside of the Stack inside of a floatingActionButton
.
floatingActionButton: FloatingActionButton.extended(
elevation: 4.0,
label: Text(Appliquer),
onPressed: () {},
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
EDIT AFTER CODE WAS ADDED:
As I said in the comments I would use a FloatingActionButton/BottomNaviagtionBar or a Save-Icon in the AppBar
Here I added the FloatingActionButton to your code:
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Stack(children: <Widget>[
new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(100.0),
),
new Card(
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: "Enter an address"),
),
),
],
),
),
),
],
)
],
),
],
),
floatingActionButton: FloatingActionButton.extended(
icon: Icon(Icons.save), label:
new Text('Appliquer'),
onPressed: () { /*perform your Action here*/ },
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.