Flutter Challenge #1

This is the first of a series of challenges reproducing Dribbble concepts with Flutter. This time we will be working with a design by Sarah-D — a dark-themed mobile banking interface that pushes Flutter's layout and animation capabilities.

First Steps

Prepare the main.dart file by removing everything and leaving only the MyApp class. Remove the debug banner and set HomePage as your home widget.

In the home_page.dart file, create a StatefulWidget. From the initState() method, call SystemChrome.setSystemUIOverlayStyle() to make the status bar transparent. Return a CupertinoPageScaffold on the build method with the backgroundColor set to #2B292A.

Laying Out the App

1. Navigation Bar

The child of our scaffold will contain a Stack. The first child will be a CupertinoNavigationBar with the same background color as the scaffold and the menu icon on the left. Wrap it inside a Positioned widget to place it at the top of the screen.

2. Welcome Text

Next, add a Container to the Stack. Inside the container we have a Column whose first child is the welcome text, implemented using a RichText widget.

3. Buttons

Place four buttons in a Row widget. Create a new StatelessWidget called SquareButton — a Column with a Placeholder for the button and another for the text. Use MainAxisAlignment.spaceBetween to align them evenly.

4. Service Request

This is a simple Row. The little dot at the start is a Container with a BoxDecoration.

5. Middle and Bottom Sections

Add containers for the other two sections. The bottom container content uses a Row for placing items.

Creating the SquareButton Widget

Use the font_awesome_flutter package. Add two parameters: the label String and the Icon. Replace the first Placeholder with a SizedBox wrapping a CupertinoButton.

The PageView

Create a PageViewCardListTile widget that receives a title and content. Add a biggerContent bool defaulting to false. Instantiate a PageController with viewportFraction set to 0.92. Populate with PageViewCard widgets inside a Stack.

Create a TrackingLines widget that receives a length and currentIndex. Add a listener to the PageController in initState() that updates when the currentIndex matches the line index.

The Drawer

The CupertinoPageScaffold doesn't have a drawer property, so we add a Container at the end of the main Stack.

Creating the Drawer Layout

Add a Container with full screen height and two thirds of the screen width, with a white background. Divide using the same proportions as the bottom container and PageView.

Animating the Drawer

Replace the Positioned widget with an AnimatedPositioned with a Duration of 300 ms. Declare a variable _isDrawerOpen and use a ternary operator for the left property. Use GestureDetector on the menu icon to toggle the drawer. Add a curve for smoother animation.

Generating the Shadow

Add a BoxDecoration with BoxShadow to the white Container of the drawer.

The Menu Items List

Create a MenuItem widget — an icon and text in a Row. Place menu options in a Container below the header section.

User Information

Create a UserInfo StatelessWidget. Place elements inside a Column, starting with a Card showing the profile picture wrapped in ClipRRect for rounded corners. Use FadeInImage.network for smooth image loading.

Conclusion

We're happy with the result. We hope this challenge helps some of you learn more about this awesome UI toolkit called Flutter. Stay tuned for more challenges in this series!