Flutter-中央のFloatingActionButton

Question

FloatingActionButtonを右側ではなく中央に作成することはできますか？

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

Centerウィジェットでラップするか、crossAxisAlignmentでCrossAxisAlignment.centerのColumnを使用してみてください。

Columnの一部を選択して、オーバーフローを防ぐために折りたたむFlexibleにラップするか、またはその一部またはすべてをListViewに置き換えて、ユーザーがスクロールできるようにする必要があります。隠されている部分を確認します。

Answer 2

この質問が最初に回答されたので、これが追加されたかどうかはわかりませんが、floatingActionButtonLocationクラスにScaffoldプロパティがあります。

元の質問では次のように機能します：

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

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

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

ドキュメントも参照してください。

• Scaffold class（s​​earch floatingActionButtonLocation）： https://docs.flutter.io/flutter/material/Scaffold-class.html
• ...およびFloatingActionButtonLocationクラス： https://docs.flutter.io/flutter/material/FloatingActionButtonLocation-class.html

Answer 3

新しいflutter APIを使用すると、ScaffoldのfloatingActionButtonLocationプロパティを次のように簡単に変更できます。

FloatingActionButtonLocation.centerFloat

例：

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

以下のように、コンテナウィジェットと整列ウィジェットを使用できます。

@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

CrossAxisAlignmentを使用するようにロジックを変更することにより、mainAxisAlignmentおよびFlexible FloatingActionButtonが画面の下部の中央に配置されました

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

コードを変更しました。ボタンは下中央にありますが、画面のサイズに関係なく、ボタンが常に下に留まるかどうかはわかりません。

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: (){}
            )
          ],
        )
      ],
    ), 
  );
}