flutterdartmobilematerial-uifloating-action-button

I need a Floating Action Button to use the information on the current state of the body of the Scaffold


I have a Scaffold. On clicking the MoreActionButton, I have a showModalBottomSheet implemented that contains a list of actions.

class MyScaffold extends StatelessWidget {
  final MyFruit apple;
  final Widget body;

  const MyScaffold({
    required this.apple,
    required this.body,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ...,
      body: body,
      floatingActionButton: MoreActionsButton(apple),
      bottomNavigationBar: ...,
      key: key,
    );
  }
}

One of these actions need to use the current information in body of this scaffold. How is this achievable?

Somehow tried adding FAB in the body itself, but that is not what's expected. Any suggestions on. how this is achievable?


Solution

  • You can create a method which will take parameters like the following

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MainWidget(
            apple: '10 apples',
          ),
        );
      }
    }
    
    class MainWidget extends StatelessWidget {
      final String apple;
      const MainWidget({Key? key, required this.apple}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          floatingActionButton: IconButton(
              onPressed: () {
                modalBottomSheetMenu(context, apple);
              },
              icon: Icon(Icons.play_arrow)),
        );
      }
    }
    //pass parameters here
    void modalBottomSheetMenu(BuildContext context, String someData) 
    {
      showModalBottomSheet(
          context: context,
          builder: (builder) {
            return new Container(
              height: 350.0,
              color: Colors.transparent, //could change this to Color(0xFF737373),
              //so you don't have to change MaterialApp canvasColor
              child: new Container(
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(10.0),
                          topRight: const Radius.circular(10.0))),
                  child: new Center(
                    child: new Text(someData),//use it inside the bottomsheet
                  )),
            );
          });
    }
    

    preview