Flutter Bottom Sheet Like Google Calendar

Question

How I create Bottom Sheet like google calendar? (image below), I have trouble making profile photos that stick up like in the picture. Can anyone help me, thank you..

Answer 1

It can be achieved by using a stack widget

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _settingModalBottomSheet();
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }

  void _settingModalBottomSheet() {
    final double imageRadius = 50;
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (BuildContext bc) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Stack(
              children: [
                Container(
                  margin: EdgeInsets.only(top: imageRadius),
                  padding: EdgeInsets.only(top: imageRadius),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(16),
                      topRight: Radius.circular(16),
                    ),
                    color: Colors.white,
                  ),
                  child: Column(
                    children: [
                      Text('asdfsdf asdfasdf'),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          IconButton(
                            icon: Icon(Icons.message),
                            onPressed: () {},
                          ),
                          SizedBox(
                            width: 16,
                          ),
                          IconButton(
                            icon: Icon(Icons.message),
                            onPressed: () {},
                          ),
                          SizedBox(
                            width: 16,
                          ),
                          IconButton(
                            icon: Icon(Icons.message),
                            onPressed: () {},
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                Align(
                  alignment: Alignment.topCenter,
                  child: CircleAvatar(
                    radius: imageRadius,
                  ),
                ),
              ],
            )
          ],
        );
      },
    );
  }
}