Flutter Multiple Floating Action Buttons (FAB)

See how to create multiple floating action buttons in flutter

To do it, just do like below

floatingActionButton:Row(
     children:[
        FloatingActionButton()
        FloatingActionButton()
     ]
)

That means inside Scaffold, you need to put floatingActionButton and return a Row or Column. Row for horizontal layout and Column is for vertical layout.
In the above code I have used Row for floatingActionButton.

That’s how you put create multiple floating action buttons in flutter

Complete code FAB

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
  runApp(const ProviderScope(
    child: MyApp(),
  ));
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home:MyHomePage()
    );
  }
}
final counterStateProvider = StateProvider<int>((ref) {
  return 0;
});

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var value = ref.watch(counterStateProvider);
    return Scaffold(
      body: Center(
          child:   Text(
            'Value: $value',
            style: Theme.of(context).textTheme.headline4,
          )

      ),
        floatingActionButton: Padding(
          padding: EdgeInsets.only(left: 30),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              FloatingActionButton(
                // access the provider via ref.read(), then increment its state.
                onPressed: () => ref.read(counterStateProvider.state).state++,
                child: Icon(Icons.add),
              ),
              Expanded(child: Container()),
              FloatingActionButton(
                backgroundColor: Colors.redAccent,
                // access the provider via ref.read(), then increment its state.
                onPressed: () => ref.read(counterStateProvider.state).state--,
                child: Icon(Icons.remove),
              )
            ],
          ),
        )

    );
  }
}