Building ABND Project 1 — Single Screen App with Flutter

Tirth Patel
6 min readFeb 25, 2019

(This is the First post in Series of Recreating ABND Projects with Flutter.)

Hey Everyone! Today we’re going to build a Single Screen app with Flutter. Here is Review for my (ABND) Project Submission which has Rubrics for the Project. So, we’re going to make a Business Card for Pied Piper 💚

Finished App

📝 Project Overview

App will contain following information about Business.

  • A Photo
  • Taglines
  • Contact Details

🔌 Prerequisites

🔧 Setup

flutter create business_card
  • For opening URLs, we’re going to use url_launcher package. App contains one image file (asset) for displaying Business Photo. So, create a new directory named assets at root of project and add following dependency for url_launcher & declare a new asset in pubspec.yaml. You can download image file from here then add it in assets/ directory.
pubspec.yaml after adding new dependencies
  • Your pubspec.yaml will look something like this:
  • After adding dependencies click on Packages Get (Android Studio or Intellij Idea) or Get Packages (VS Code) or Run following command to install packages.
flutter packages get
  • Now we’re done with project setup. So let’s get started with some Code.

🎹 Coding

  • Remove everything from main.dart file.
  • We’ll use Material Widgets for designing the app, which are present in flutter/material.dart package. They are implemented according to Google’s Material Design Guidelines. We’ll also use url_launcher package for launching URLs from the app. So, add import statements for these packages at the top.
  • Add main function with runApp function inside it’s body. Pass MyApp() inside runApp function, which (MyApp) is going to be a class (and Parent of all other widgets) which we’re going to create in next step. runApp will inflate MyApp widget.
  • Create a new class, I’ve named it MyApp (You can name it anything) which extends StatelessWidget because our app doesn’t maintain any states. In other words, App UI is static.
  • MyApp is Parent of all the other widgets, and “Everything in Flutter is a Widget!” So, our app itself a widget!
  • Add 2 Instance Variables inside class which we’re going to use in later part of the code.
main.dart after adding Initial Code
  • Now we need to override build method which returns a MaterialApp that holds other Material Widgets. Set title & color properties which can be seen in App Stack. home (default route) property returns a Scaffold Widget which provides a basic structure for our app.
  • This app doesn’t have an app-bar but if you want to add one, you can set appBar property of Scaffold and specify an AppBar widget.
  • body property contains a Container widget which holds a ListView as its child. Here, it’s better to use ListView instead of Column widget because, ListView creates scroll-able list of widgets when there is no more room left on the device screen. To set background colour of Container, set color property.
  • ListView has 6 children - one Image, two Text, one Divider & two ListTile widgets.
  • Use Image.asset() named constructor as first child of List, which displays image from asset bundle. Pass name of the image (assets/<name>.png) in parameter of constructor.
2nd & 3rd Child of ListView
  • To display next 2 pieces of Text (Taglines), I’ve created a method named aboutBusiness (to reduce lines of code), which returns a Text widget wrapped inside a Container.
  • First 2 method parameters of aboutBusiness are required since both Tagline has some text and textSize whereas last 2 parameters of aboutBusiness are Optional because as you can see in above screenshot, first tagline requires fontWeight and second tagline requires fontStyle. So, parameters which are not required, can be omitted and same method (aboutBusiness) can be utilised to display 2 taglines. To make method parameters optional, surround them with a pair of curly braces in method definition.
  • margin property is used to set 16 pixels of margin from all sides.
  • child property has a Text widget whose style property is set to TextStyle widget. TextStyle is use to change properties like color, textSize, fontWeight, fontStyle.
  • textAlign property is set to TextAlign.Center to center-align text.
  • Forth child of List is a Divider wrapped inside a Container. Container is used to set margin for divider. EdgeInsets.symmetric() is a named constructor, which is used to give different Vertical & Horizontal margin for divider. (Optional Parameters are eveywhere!)
5th & 6th Child of ListView
  • To display last 2 pieces of Text (Contact info), I’ve created a method named contactBusiness (again to reduce lines of code), which returns a ListTile widget wrapped inside a Container.
  • Just like aboutBusiness method, aboutContact has Optional Parameters and all of them are annotated as required.
  • You may be wondering why both? Answer is, all 3 parameters are required to create ListTile (in this case) and at the time of calling method, we can pass them in following format, which makes it easy to understand, what parameter is for when there are so many parameters & it is more readable.
Optional Parameters 💙
  • leading property of ListTile which accepts a widget. So can we can display leading icons for list-items.
  • onTap property of ListTile is set to launchUrl method call. As the name suggest, we can write custom action which is performed when ListTile is tapped.
  • launchUrl method checks if URL is supported or not using canLaunch & if it is supported then launches URL using launch method.
launchUrl method in main.dart

📂 Complete Gist

That’s it for this one. Thank you for reading this 💙

You can find complete source code of this app in this repository.

If you find this post useful, press👏 button as many times as you can and share this post with others. You can leave your feedback/suggestion in comments 💬 below. For future posts of this series, you can follow me on medium to receive post updates. 🔔

You can checkout the original project written in Java here.

For any other issues feel free to reach out to me via Twitter.

--

--