iOS notification UI on Flutter | Basic version

Hi Flutterers!

I just tried to replicate iOS notification screen on Flutter! Here is something of how it looks like.

I used a package called flutter_slidable available here, created by Romain Rastel (thanks to him!) :D

The code

The code, as usual (FLUTTER :D), is pretty simple. I just used this guy’s package and initiated a widget called Slideable and added a Container with some rows and columns and decorations available in Flutter, to make it look pretty much like the actual iOS notification center!

When the item is pulled to slide sideways, the three items on the right side do not appear the same way as they appear in actual iOS with the fade effect but it’s real close.

Also, I will be adding the grouped notifications part as well in the future. You guys are free to add more to it! :)

PS: I didn’t create a github for this, as this is not too complicated. Below, I have pasted the single file code which produced the output in the images above!

The main build function

Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  return Scaffold(
    backgroundColor: Colors.black,
    body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.only(top: 32.0),
        child: Column(
          children: <Widget>[
            Container(
              height: 40.0,
              child: Image(
                image: AssetImage('assets/lockOpened.png'),
              ),
            ),
            Text(
              '11:59',
              style: TextStyle(
                color: Colors.white,
                fontSize: 80.0,
                fontWeight: FontWeight.w100,
              ),
            ),
            Text(
              'Wednesday, June 19',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                fontWeight: FontWeight.w100,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 32.0),
            ),
            Expanded(
              child: Center(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(bottom: 8.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text(
                              'Notification Center',
                              style: TextStyle(
                                  color: Colors.white, fontSize: 25.0),
                            ),
                            Container(
                              padding: const EdgeInsets.all(6.0),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50.0),
                                  color: _color),
                              child: Icon(
                                Icons.clear,
                                size: 20.0,
                              ),
                            )
                          ],
                        ),
                      ),
                      _buildSlidable(),
                      Padding(
                        padding: const EdgeInsets.only(top: 8.0),
                      ),
                      _buildSlidable(),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

The _buildSlidable function

Widget _buildSlidable() {
  return Slidable(
    delegate: SlidableDrawerDelegate(),
    child: Container(
      height: 95.0,
      decoration: BoxDecoration(
        color: _color,
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Container(
                      height: 25.0,
                      width: 25.0,
                      child: Image(
                        image: AssetImage('assets/whatsappLogo.png'),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Center(
                        child: Text(
                          'WHATSAPP',
                          style: TextStyle(
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Text('1h ago')
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(right: 16.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Text(
                            'Hello from Flutter Karachi!',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                        ),
                        Text(
                          'We a are group of highly dedicated individuals in Karachi Pakistan',
                          overflow: TextOverflow.ellipsis,
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  height: 35.0,
                  width: 35.0,
                  child: Image(
                    image: AssetImage('assets/group.JPG'),
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    ),
    secondaryActions: <Widget>[
      Padding(
        padding: const EdgeInsets.only(left: 8.0, right: 2.0),
        child: Container(
          decoration: BoxDecoration(
            color: _color,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              bottomLeft: Radius.circular(10.0),
            ),
          ),
          child: Center(child: Text('Manage')),
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(right: 2.0),
        child: Container(
          decoration: BoxDecoration(
            color: _color,
          ),
          child: Center(child: Text('View')),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          color: _color,
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0),
          ),
        ),
        child: Center(child: Text('Clear')),
      ),
    ],
  );
}

Cheers!