Flutter – FloatingActionButton en el centro

Solución:

No sé si esto se agregó desde que se respondió esta pregunta por primera vez, pero ahora hay floatingActionButtonLocation propiedad en el Scaffold clase.

Funcionaría así en su pregunta original:

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

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

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

También vea la documentación:

• Scaffold clase (buscar floatingActionButtonLocation): https://docs.flutter.io/flutter/material/Scaffold-class.html
• …y el FloatingActionButtonLocation clase: https://docs.flutter.io/flutter/material/FloatingActionButtonLocation-class.html

Con la nueva API de flutter, lo hace muy fácilmente, simplemente cambie el floatingActionButtonLocation propiedad en el andamio para

FloatingActionButtonLocation.centerFloat

Ejemplo :

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

Usar la propiedad floatingActionButtonLocation de andamio clase.

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

Ejemplo completo:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(child: Center(child: Text('Hello World')),),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.camera, color: Colors.white, size: 29,),
        backgroundColor: Colors.black,
        tooltip: 'Capture Picture',
        elevation: 5,
        splashColor: Colors.grey,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

---

---

Utiliza Nuestro Buscador