Floating action button Flutter - CodeMub

Flutter, developed by Google, is a popular open-source UI software development toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. One of the key components Flutter provides for building interactive and user-friendly interfaces is the Floating Action Button (FAB). In this blog post, we'll explore how to create a Floating Action Button in Flutter.

Getting Started with Flutter

Before we delve into the implementation, make sure you have Flutter installed on your machine. You can download Flutter from the official Flutter website .

Setting Up Android Studio for Flutter Development

Once Flutter is installed, create a new Flutter project using the following command: 

flutter create floating_action_button
cd floating_action_button

Now, open the lib/main.dart file in your preferred code editor.

Implementing the Floating Action Button

Let's create a simple Flutter application with a Floating Action Button that increments a counter when pressed.

1. Import Flutter Material package

import 'package:flutter/material.dart';

2. Define the main function

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

3. Create a Flutter app

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Floating Action Button Flutter",
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: MyPage(),
    );
  }
}

4. Create the home page

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State createState() => _MyPageState();
}

5. Define the state for the home page

class _MyPageState extends State {
  int counterValue = 0;

  void incrementCounter() {
    setState(() {
      counterValue++;
      print("Button clicked $counterValue times");
    });
  }

6. Build the UI for the home page

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Floating action Button"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Counter",
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              '$counterValue',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

7. Run the application

Save the changes and run your Flutter application using the following command:

flutter run

Complete Code snippet

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Floating Action Button CodeMub",
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: MyPage(),
    );
  }
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);
  @override
  State createState() => _MyPageState();
}

class _MyPageState extends State {
  int countervalue = 0;

  void incrementNumber() {
    setState(() {
      countervalue++;
      print("Button is clicked $countervalue times");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Floating Action Button"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Counter",
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              '$countervalue',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementNumber,
        child: Icon(Icons.add),
      ),
    );
  }
}    

Complete Source Code

Output 

Conclusion

Creating a Floating Action Button in Flutter is a straightforward process. Flutter's declarative UI approach and rich set of pre-designed widgets make it easy to build interactive and visually appealing user interfaces. You can customize the FAB's appearance, behavior, and integrate it into your Flutter projects to enhance user interactions. Explore more Flutter documentation and experiment with different features to create delightful and engaging mobile applications. Happy coding!