CODEWITHSUNDEEP
flutter
rejy11
rejy11

Reputation: 752

Flutter bottom sheet modal effect

I want to achieve a similar design to the bottom sheet used on the Samsung Notes app:

I'm able to add the rounded corners, but I'm unable to make the system navigation bar at the bottom transparent. I think there is also a slight margin between the bottom sheet and the system navigation bar which I'm unable to achieve.

This is what I currently have:

I've been made aware of the SystemChrome class which I think is supposed to help with this, but I haven't had any luck yet:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.transparent,
  ));

Upvotes: 1

Views: 6755

Answers (1)

J. S.
J. S.

Reputation: 9625

I'm not sure where you are running that last piece of code, But it works for me. I put the following code being called in a button and I didn't even need to use a setState:

class SystemColorChangeIssue extends StatefulWidget {
  static const routeNamed = '/news-screen-detail';

  @override
  _SystemColorChangeIssueState createState() => _SystemColorChangeIssueState();
}

class _SystemColorChangeIssueState extends State<SystemColorChangeIssue> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            color: Colors.red,
            onPressed: () => changeSystemColor(Colors.red),
            child: Text('Red'),
          ),
          RaisedButton(
            color: Colors.blue,
            onPressed: () => changeSystemColor(Colors.blue),
            child: Text('Blue'),
          ),
          RaisedButton(
            color: Colors.black,
            onPressed: () => changeSystemColor(Colors.transparent),
            child: Text('Transparent'),
          ),
          RaisedButton(
            color: Colors.pink,
            onPressed: () => showModal(context),
            child: Text('Show modal and show pink'),
          ),
        ],
      ),
    );
  }

  void changeSystemColor(Color color){
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemNavigationBarColor: color,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
  }

  void showModal(context){
    changeSystemColor(Colors.pink);
    showModalBottomSheet(
      context: context,
      builder: (context){
        return Container(
          padding: EdgeInsets.all(8),
          height: 200,
          alignment: Alignment.center,
          child: Text('Modal'),
        );
      }
    );
  }
}

You should be able to run the same code on trigger to show your modal.

Upvotes: 2

Related Questions