How to change shape size and location of Floating Action Button in Flutter App
Introduction
Floating Action Button (FAB) is a crucial component in mobile apps, particularly in Flutter applications. It provides an easy-to-access button that allows users to perform a primary action. However, the default FAB might not always meet the design requirements of an application. Fortunately, Flutter provides various options to customize the shape, size, and location of the FAB.
Changing the Shape of FAB
To change the shape of the FAB, you can use the `shape` property. The `shape` property takes a ` RoundedRectangleBorder` or `CircleBorder` as its value. Here’s an example:
“`dart
FloatingActionButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onPressed: () {},
child: Icon(Icons.add),
)
“`
Changing the Size of FAB
The size of the FAB can be changed using the `mini` property. However, for more control, you can use the `width` and `height` properties within a `SizedBox` or `Container` widget. Here’s an example:
“`dart
SizedBox(
width: 60,
height: 60,
child: FloatingActionButton(
mini: false,
onPressed: () {},
child: Icon(Icons.add, size: 30),
),
)
“`
Changing the Location of FAB
To change the location of the FAB, you can use the `floatingActionButtonLocation` property within the `Scaffold` widget. Here’s an example:
“`dart
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)
“`
Code Example
Here’s a complete example of a Flutter app with a customized FAB:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: SizedBox(
width: 60,
height: 60,
child: FloatingActionButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
mini: false,
onPressed: () {},
child: Icon(Icons.add, size: 30),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
“`
Conclusion
In conclusion, customizing the shape, size, and location of a Floating Action Button in Flutter is straightforward. By using the `shape`, `mini`, `width`, `height`, and `floatingActionButtonLocation` properties, you can create a FAB that meets your application’s design requirements.
FAQ
1. Q: How do I change the color of the FAB?
A: You can change the color of the FAB using the `backgroundColor` property.
2. Q: Can I use a custom icon for the FAB?
A: Yes, you can use a custom icon for the FAB by providing a custom `Widget` to the `child` property.
3. Q: How do I add a tooltip to the FAB?
A: You can add a tooltip to the FAB using the `tooltip` property.
4. Q: Can I use the FAB with other widgets?
A: Yes, you can use the FAB with other widgets, such as a `BOTTOM APP BAR`.
5. Q: How do I handle the FAB’s `onPressed` event?
A: You can handle the FAB’s `onPressed` event by providing a callback function to the `onPressed` property.
