rafaelcb21 rafaelcb21 - 26 days ago 8
Dart Question

Flutter - Keyboard is raising on screen the FloatingActionButton

I was using the

TextField
but the keyboard is raising the
FloatingActionButton
. I wonder if it is possible for the keyboard not to raise a
FloatingActionButton
?

In the code below I put two
FloatingActionButton
in two different ways but in both the keyboard goes up, which hinders the field filling since the FABs are in the same line as the
TextField
, according to the gif below.

Is there any way to solve this?

enter image description here

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final ui.Size logicalSize = MediaQuery.of(context).size;
final double _width = logicalSize.width;
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new Stack(
children: <Widget>[
new ListView(
children: <Widget>[
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
],
),
new Positioned(
bottom: 16.0,
left: (_width / 2) - 28,
child: new FloatingActionButton(
backgroundColor: new Color(0xFFE57373),
child: new Icon(Icons.check),
onPressed: (){}
),
)
],
),
floatingActionButton: new FloatingActionButton(
backgroundColor: new Color(0xFFE57373),
child: new Icon(Icons.check),
),
);
}
}

Answer Source

It looks like you're designing a full screen dialog.

A floating action button represents the primary action in an application, like creating a new item. It is not what you'd use to confirm changes and dismiss a full screen dialog that contains a list of text fields.

Rather than using a FloatingActionButton, I would a recommend an AppBar with a FlatButton in the actions slot, like in this Material design example:

save

You can see an example of how to build a full-screen dialog in Flutter in the Gallery source code.