webentwicklung-frage-antwort-db.com.de

Flutter - FloatingActionButton in der Mitte

Ist es möglich, das FloatingActionButton in der Mitte anstelle der rechten Seite zu machen?

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

enter image description here

7
rafaelcb21

Versuchen Sie es in ein Center Widget einzuwickeln oder verwenden Sie ein crossAxisAlignment von CrossAxisAlignment.center auf Ihrem Column.

Sie sollten einen Teil Ihres Column auswählen, der in ein Flexible eingebunden werden soll, das kollabiert, um einen Überlauf zu vermeiden, oder einen Teil oder alles durch ein ListView ersetzen, damit Benutzer einen Bildlauf durchführen können um die Teile zu sehen, die versteckt sind.

3
Collin Jackson

Ich weiß nicht, ob dies hinzugefügt wurde, seit diese Frage zum ersten Mal beantwortet wurde, aber jetzt gibt es die Eigenschaft floatingActionButtonLocation für die Klasse Scaffold.

In Ihrer ursprünglichen Frage würde das so funktionieren:

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

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

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

Siehe auch die Dokumentation:

38
Brian Kung

Mit der neuen Flutter-API können Sie dies ganz einfach tun, indem Sie die Eigenschaft floatingActionButtonLocation im Scaffold auf ändern

FloatingActionButtonLocation.centerFloat

enter image description here

Beispiel:

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

Sie können die Widgets "Container" und "Ausrichten" wie folgt verwenden:

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

Durch Ändern der Logik für die Verwendung von crossAxisAlignment wurden mainAxisAlignment und Flexible the FloatingActionButton am unteren Bildschirmrand zentriert

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

Ich habe den Code geändert, jetzt befindet sich die Schaltfläche unten in der Mitte, aber ich weiß nicht, ob sie unabhängig von der Bildschirmgröße immer unten bleibt.

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

enter image description here

0
rafaelcb21