Under 15 mins on Flutter || iOS Reminder app static UI (dark mode)

Static (interaction-less) iOS reminder application UI in Flutter under 15

Hello people, this short article shows how to simply build the all new iOS 13 dark mode Reminder app UI in Flutter in a very less time! :D

Note: The text field might act a little weird because it’s lesser in height in the original Reminder app. Suggestions and improvements are always welcomed!

Clone the complete code from here

We will be building something like this:

Looks exactly like iOS Reminder UI? All thanks to Flutter :D

Some basics

Before we begin to actually create our widgets, let’s first do some little tweaking in ThemeData in our main Material App.

Add the bold line in your ThemeData, this will create a dark theme in whole of your Flutter App.

theme: ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.dark,
),

Now add a background colour to your Scaffold.

Scaffold(
  backgroundColor: Colors.black,

In order to create a borderless and colourless textfield in Flutter, you might need to play with ThemeData and it’s properties.

Theme(
  data: ThemeData(
      hintColor: Colors.transparent,
      primaryColor: Colors.transparent),
  child: TextFormField(
    cursorColor: Colors.white38,
    decoration: InputDecoration(
      suffixIcon: Icon(
        Icons.mic,
        color: Colors.white38,
      ),
      fillColor: Colors.white10,
      prefixIcon: Icon(
        Icons.search,
        color: Colors.white38,
      ),
      hintStyle: TextStyle(color: Colors.white38),
      filled: true,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
    ),
  ),
),

Card widgets

I created the below _buildRowCard function which takes some basic inputs & styling, and creates one of the first two cards that you can see in the image above.

Expanded _buildRowCard(
    IconData icon, Color color, String text, String title) {
  return Expanded(
    child: Card(
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                CircleAvatar(
                  radius: 15.0,
                  child: Icon(
                    icon,
                    size: 20.0,
                  ),
                  backgroundColor: color,
                  foregroundColor: Colors.white70,
                ),
                Text(
                  text,
                  style: Theme.of(context)
                      .textTheme
                      .display1
                      .copyWith(fontWeight: FontWeight.bold),
                )
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(top: 12.0),
              child: Text(
                title,
                style: Theme.of(context).textTheme.subtitle.copyWith(
                      color: Colors.grey,
                      fontWeight: FontWeight.bold,
                    ),
              ),
            )
          ],
        ),
      ),
      color: Colors.white10,
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
    ),
  );
}

With the same pattern you can build other cards as well! :)

Get the complete code here.

Cheers!

Flutter Community