Flutter - FloatingActionButton au centre

Question

Est-il possible de faire le FloatingActionButton au centre au lieu du côté droit?

import 'package:flutter/material.Dart';
import 'number.Dart';
import 'keyboard.Dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
      ],
    ),
    floatingActionButton: new FloatingActionButton(
      elevation: 0.0,
      child: new Icon(Icons.check),
      backgroundColor: new Color(0xFFE57373),
      onPressed: (){}
    )
  );
}

Answer 1

Essayez de l'envelopper dans un widget Center ou utilisez un crossAxisAlignment de CrossAxisAlignment.center sur votre Column.

Vous devez choisir une partie de votre Column à envelopper dans un Flexible qui s'effondrera pour éviter le débordement, ou la remplacer en tout ou partie par un ListView afin que les utilisateurs puissent faire défiler pour voir les parties cachées.

Answer 2

Je ne sais pas si cela a été ajouté depuis la première réponse à cette question, mais il y a maintenant la propriété floatingActionButtonLocation dans la classe Scaffold.

Cela fonctionnerait comme ceci dans votre question d'origine:

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    // ...

    floatingActionButton: new FloatingActionButton(
      // ...FloatingActionButton properties...
    ),

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

Voir également la documentation:

• Scaffold classe (recherche floatingActionButtonLocation): https://docs.flutter.io/flutter/material/Scaffold-class.html
• ... et la classe FloatingActionButtonLocation: https://docs.flutter.io/flutter/material/FloatingActionButtonLocation-class.html

Answer 3

Avec la nouvelle API flutter, vous pouvez très facilement changer la propriété floatingActionButtonLocation dans l'échafaudage en

FloatingActionButtonLocation.centerFloat

Exemple :

return new Scaffold(
  floatingActionButton: new FloatingActionButton(
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerFloat,
  bottomNavigationBar: new BottomAppBar(
    color: Colors.white,
    child: new Row(...),
  ),
);

Answer 4

Vous pouvez utiliser les widgets Conteneur et Aligner comme ci-dessous:

@override
Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(

      ),
      floatingActionButton: Container(
        padding: EdgeInsets.only(bottom: 100.0),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: FloatingActionButton.extended(
            onPressed: _getPhoneAuthResult,
            icon: Icon(Icons.phone_Android),
            label: Text("Authenticate using Phone"),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

Answer 5

En modifiant la logique pour utiliser crossAxisAlignment, le mainAxisAlignment et le Flexible the FloatingActionButton étaient centrés au bas de l'écran

import 'package:flutter/material.Dart';
import 'number.Dart';
import 'keyboard.Dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,       
      children: <Widget>[
        new Number(),
        new Keyboard(),
        new Flexible(
          child: new Container(
            padding: new EdgeInsets.only(bottom: 16.0),
            child: new FloatingActionButton(
              elevation: 0.0,
              child: new Icon(Icons.check),
              backgroundColor: new Color(0xFFE57373),
              onPressed: (){}
            )
          )         
        )
      ],
    ), 
  );
}

Answer 6

J'ai modifié le code, maintenant le bouton est en bas au centre mais je ne sais pas s'il restera toujours en bas, quelle que soit la taille de l'écran.

import 'package:flutter/material.Dart';
import 'number.Dart';
import 'keyboard.Dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
        new Stack(
          alignment: new FractionalOffset(0.5, 1.0),
          children: <Widget>[
            new FloatingActionButton(
              elevation: 0.0,
              child: new Icon(Icons.check),
              backgroundColor: new Color(0xFFE57373),
              onPressed: (){}
            )
          ],
        )
      ],
    ), 
  );
}