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

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

Waleed Arshad
Dec 3, 2019 · 2 min read

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

Articles and Stories from the Flutter Community

Waleed Arshad

Written by

Computer Scientist | Flutter Pakistan | Software Development | Xamarin | C# | Python | Dart

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade