Simple profile screen with Flutter
Hiii everyone, today we will build a simple profile screen with a Flutter, I will introduce the most importants widget.
If you don’t know about Flutter, basically Flutter is a Google Framework for developing mobile applications using Dart language, how does it work? Everything is a widget(like a class with a lot of entities and methods).
Official page: https://flutter.dev/
Official Dart Page: https://dart.dev/
Before we start on this project I’d like to explain which widget we will use.
MaterialApp: Here we could configure routes and themes.
Scaffold: Basically this widget is responsible for app skeleton it’s possible placed App bar, body, drawer, floating actions, bottom buttons and a lot of things.
Container: Works like <div> in Html, we could config shape, height, width, background color and etc.
Column and row: There are responsible to defining if your widget is a column or a row (remember those are using Flex).
Now you’ve all basic information about the most importants widget.
Let’s coding!!!!!!!
- Create app: Type in your console: flutter create profile01.
(I believe in this moment you’ve your environment already setuped, if not) here you could find all information: https://flutter.dev/docs/get-started/install and find how to run your app.
2. After run the app, will be like this:
so we need to clean it up and the result will be:
3. Add AppBar:
4. Add Body and Gradient Box:
5. Add Icons, profile image, name and subtitle:
6. Add Followers and Followings section:
7. Last part :) Add Contact Information:
The result will be like this:
MindMap:
I hope you enjoy this How to, thank you :)
Full code:
