Flutter - FloatingActionButton in the center
Solution 1
Try wrapping it in a Center
widget or use a crossAxisAlignment
of CrossAxisAlignment.center
on your Column
.
You should pick one part of your Column
to be wrapped in a Flexible
that will collapse to avoid overflow, or replace some or all of it with a ListView
so users can scroll to see the parts that are hidden.
Solution 2
I don't know if this was added since this question was first answered, but there's now floatingActionButtonLocation
property on the Scaffold
class.
It would work like this in your original question:
class ContaPage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
// ...
floatingActionButton: new FloatingActionButton(
// ...FloatingActionButton properties...
),
// Here's the new attribute:
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
Also see the documentation:
-
Scaffold
class (searchfloatingActionButtonLocation
): https://docs.flutter.dev/flutter/material/Scaffold-class.html - ...and the
FloatingActionButtonLocation
class: https://docs.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html
Solution 3
With the new flutter API you do that very easily just change the floatingActionButtonLocation
property in the Scaffold to
FloatingActionButtonLocation.centerFloat
Example :
return new Scaffold(
floatingActionButton: new FloatingActionButton(
child: const Icon(Icons.add),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
bottomNavigationBar: new BottomAppBar(
color: Colors.white,
child: new Row(...),
),
);
Solution 4
Use the Property floatingActionButtonLocation of scaffold class.
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
Full Example:
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,
);
}
}
Solution 5
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
Use this property with floatingActionButtonLocation property in Scaffold.
rafaelcb21
Updated on July 17, 2022Comments
-
rafaelcb21 almost 2 years
Is it possible to make the
FloatingActionButton
in the centre instead of the right side?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: (){} ) ); }