CODEWITHSUNDEEP
dartflutter
rafaelcb21
rafaelcb21

Reputation: 13304

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),
      ),
    );
  }
}

Upvotes: 6

Views: 3343

Answers (1)

Collin Jackson
Collin Jackson

Reputation: 116728

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.

Upvotes: 7

Related Questions