Flutter for Beginners — Create Your Very First App in Flutter — a Tutorial
In this tutorial, you will build a simple “business card” kind of app, which will help you understand the basics of how Flutter widgets work.
Prerequisites:
- Android Studio with Flutter SDK (https://flutter.io/get-started/install/)
- Minimal understanding of HTML, XML or similar markup language.
- Create a new Flutter Project from Android Studio:
! Don’t forget to check your Flutter SDK path! Flutter SDK can be downloaded here — https://flutter.io/sdk-archive/.
2. Open main.dart file from the lib folder. This is the file where you’ll build your layout. Let’s make things less overwhelming. Delete all the code after these lines:
...
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}/* Delete all lines starting from here */
Next, change the code starting at “home: …” line to this:
...
home: Scaffold(
body: new Container(
color: Colors.white,
child: Center(
child: Text('Hello World'),
),
),
),
);
}
}If you run the emulator now, your app should look like this.
3. Let’s add the main background. I used this picture https://git.io/fAPBG. Make sure to save your image under [your_project_name]/images folder:
After saving your image, put this code under uses-material-design: true in the pubspec.yaml (you’ll find this file in the main project folder). Now your image will be recognized by the app. Perfect.
...
uses-material-design: true
assets:
- images/bg.png
...One more thing — we need to add the image to our layout, as a background. Add the BoxDecoration to the Container we created earlier (see some useful links to Flutter documentation at the end of this tutorial).
home: Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/bg.png'), fit: BoxFit.cover),
),
child: Center(
child: Text('Hello World'),
),
),
),
);
}
}Run the app now and you should be able to see your background:
4. Cool! Now when we know how to add images, let’s add the small image (logo or whatever you want) and the text boxes. Save the image file (mine is here https://git.io/fAPRh) to the same images folder as before and update the pubspec.yaml:
...
uses-material-design: true
assets:
- images/bg.png
- images/logo.png
...5. We’ll add the Column widget as the child of the Container widget. And our Column will have 3 children: Image, Center and Center. Our hierarchy will be like this:
Container >>> Container’s Child: Column >>> Column’s Children:
- Image
- Center (Center’s Child: Text)
- Center (Center’s Child: Text)
I know, I know…
Let’s see how this would look with the actual code. Update the code as follows:
...
home: Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/bg.png'), fit: BoxFit.cover),
),
// Column widget that displays its children in a vertical array
child: Column(
children: [
Image.asset('images/logo.png',
width: 225.0, height: 225.0, fit: BoxFit.contain),
Center(
child: Text(
'2814 Morningview Lane\nRedan, GA 30074\n641-998-7204'),
),
Center(
child: Text(
'There is a powerful driving force inside every human being that, once unleashed, can make any vision, dream, or desire a reality.'),
),
],
),
),
),
);
}
}Note: the “address” text is created by random address generator (you can easily find one online).
Keep in mind that you need to control that your parenthesis and square brackets are always properly closed. You’ll notice (in Android Studio) that Flutter automatically adds comments for the closing parenthesis and brackets, which is super helpful in this case.
Run the app:
6. Hmm, our widgets are kind of crammed together. Let’s improve this by implementing some Padding. Notice how objects are related to each other and take your time to understand what is under what.
...
home: Scaffold(
body: new Container(
// Padding for the whole Container widget, padding here is a Container property
padding: const EdgeInsets.all(16.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/bg.png'), fit: BoxFit.cover),
),
// Column widget that displays its children in a vertical array
child: Column(
children: [
Image.asset('images/logo.png',
width: 225.0, height: 225.0, fit: BoxFit.contain),
// Padding for the Text, padding here is a widget that insets its child by the given padding
new Padding(
padding: new EdgeInsets.all(16.0),
child: Text(
'2814 Morningview Lane\nRedan, GA 30074\n641-998-7204'),
),
// Padding for the Text, padding here is a widget that insets its child by the given padding
new Padding(
padding: new EdgeInsets.all(16.0),
child: Text(
'There is a powerful driving force inside every human being that, once unleashed, can make any vision, dream, or desire a reality.'),
),
],
),
),
),
);
}
}After adding the Padding:
7. Looks much better. Now we can decorate the first text box by adding color (we will wrap our Text in a Container to do this) and style (to the Text widget) properties:
...
home: Scaffold(
body: new Container(
// Padding for the whole Container widget, padding here is a Container property
padding: const EdgeInsets.all(16.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/bg.png'), fit: BoxFit.cover),
),
// Column widget that displays its children in a vertical array
child: Column(
children: [
Image.asset('images/logo.png',
width: 225.0, height: 225.0, fit: BoxFit.contain),
new Padding(
padding: new EdgeInsets.all(16.0),
child: Container(
padding: new EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
color: Colors.white,
child: Text(
'2814 Morningview Lane\nRedan, GA 30074\n641-998-7204',
style: new TextStyle(
fontSize: 20.0, height: 1.5, color: Color(0xFF757c81)),
),
),
),
// Padding for the Text, padding here is a widget that insets its child by the given padding
new Padding(
padding: new EdgeInsets.all(16.0),
child: Text(
'There is a powerful driving force inside every human being that, once unleashed, can make any vision, dream, or desire a reality.'),
),
],
),
),
),
);
}
}
8. Challenge time! Can you do the same for the second text? Try yourself! I will wrap the text with a Container that has a padding of 16.0 (logical pixels) outside the text and a background color 0xCC42A7D1 (notice CC in the color code defines transparency level). I will style my text with a font size of 16.0, height of 1.5 and white font color.
In you’ve made a proper changes, your app should look like this:
Good job, you little Flutter genius, I am proud of you! Don’t worry if you couldn’t do it though, you will see my code in the next steps.
9. I feel like there’s too much space at the bottom, I want to center everything vertically, that shouldn’t be hard. Use mainAxisAlignment property on our Column:
...
home: Scaffold(
body: new Container(
// Padding for the whole Container widget, padding here is a Container property
padding: const EdgeInsets.all(16.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/bg.png'), fit: BoxFit.cover),
),
// Column widget that displays its children in a vertical array
child: Column(
// Center everything vertically
mainAxisAlignment: MainAxisAlignment.center,
children: [
/* Row one starts here! */
Image.asset('images/logo.png',
width: 225.0, height: 225.0, fit: BoxFit.contain),
/* Row two starts here! */
new Padding(
padding: new EdgeInsets.all(16.0),
child: Container(
padding: new EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
color: Colors.white,
child: Text(
'2814 Morningview Lane\nRedan, GA 30074\n641-998-7204',
style: new TextStyle(
fontSize: 20.0, height: 1.5, color: Color(0xFF757c81)),
),
),
),
/* Row three starts here! */
// Padding for the Text, padding here is a widget that insets its child by the given padding
new Padding(
padding: new EdgeInsets.all(16.0),
child: Container(
padding: new EdgeInsets.all(16.0),
color: Color(0xCC42A7D1),
child: Text(
'There is a powerful driving force inside every human being that, once unleashed, can make any vision, dream, or desire a reality.',
style: new TextStyle(
fontSize: 16.0, height: 1.5, color: Colors.white),
),
),
),
],
),
),
),
);
}
}
10. Let’s work a little bit more on the overall styling and layout (this is the last step, I promise). I want to move the logo to the left and the “address” text to the right to achieve the desired look. Notice that I removed or updated some old padding properties and added an Align widget to the logo image and the “address” text.
...
home: Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/bg.png'), fit: BoxFit.cover),
),
// Column widget that displays its children in a vertical array
child: Column(
// Center everything vertically
mainAxisAlignment: MainAxisAlignment.center,
children: [
/* Row one starts here! */
new Padding(
padding: new EdgeInsets.all(32.0),
child: new Align(
alignment: Alignment.centerLeft,
child: Image.asset('images/logo.png',
width: 225.0, height: 225.0, fit: BoxFit.contain),
),
),
/* Row two starts here! */
new Align(
alignment: Alignment.centerRight,
child: Container(
padding: new EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
color: Colors.white,
child: Text(
'2814 Morningview Lane\nRedan, GA 30074\n641-998-7204',
style: new TextStyle(
fontSize: 20.0, height: 1.5, color: Color(0xFF757c81)),
),
),
),
/* Row three starts here! */
new Padding(
padding: new EdgeInsets.all(32.0), // Padding outside the text Container
child: Container(
padding: new EdgeInsets.all(16.0), // Padding outside the Text
color: Color(0xCC42A7D1),
child: Text(
'There is a powerful driving force inside every human being that, once unleashed, can make any vision, dream, or desire a reality.',
style: new TextStyle(
fontSize: 16.0, height: 1.5, color: Colors.white),
),
),
),
],
),
),
),
);
}
}Done! After these changes, final app should look like this:
Don’t forget the awesome fact that Flutter apps will work on both Android & iOS!
Final main.dart:
Feel free to showcase your first Flutter app in the comment section down below and good luck with exploring the Flutter world!
Learn more:
- https://docs.flutter.io/flutter/painting/BoxDecoration-class.html
- https://flutter.io/widgets/layout/
- https://docs.flutter.io/flutter/widgets/Container-class.html
- https://docs.flutter.io/flutter/widgets/Column-class.html
- https://docs.flutter.io/flutter/widgets/Padding-class.html
- https://flutter.io/cookbook/forms/text-input/
- https://material.io/design/typography/the-type-system.html#type-scale
- https://docs.flutter.io/flutter/widgets/Flex/mainAxisAlignment.html
- https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905
Credits:
- Background image by ThirtyOne Dev https://creativemarket.com/31devco/1848321-Geometric-Instagram-Templates
- Logo image by Freepik https://www.freepik.com/free-vector/modern-logotype-collection_1718068.htm
- Quote by Tony Robbins https://www.tonyrobbins.com/tony-robbins-quotes/
- Flutter logo (in a story thumbnail) https://flutter.io/
Disclaimer: I am a beginner myself and I believe together we can learn better! If I made some silly mistake or missed out an important point, just let me know, I am open to your feedback.
