Flutter First Tutorial : Login Screen
Before start Flutter application development please go through https://medium.com/rohit-nisal/flutter-mobile-application-development-ffd4bf15901 link which cover Flutter overall overview.
Design login screen:
This Tutorial will cover below points:
- Installation documentation and Editor
- Folder structure with short details
- Run application on simulator
- Understanding basic widget
- How to approach flutter login screen UI design
- Develop flutter login screen
- application tutorial github link
For Installation, Folder structure, Run application on simulator, Understanding basic widget, is well documented at flutter site & I will provide direct access link to redirect page respectively.
- Installation documentation: I will not cover details flutter installation as this well documented into flutter site. Please go through documentation link.
please go through documentation https://flutter.io/get-started/install / link and for mac machine installation https://flutter.io/setup-macos/ .
Editor used https://flutter.io/get-started/editor/#vscode or https://flutter.io/get-started/editor/#androidstudio document link
2. Folder structure: how to create new flutter application used https://flutter.io/get-started/test-drive/#vscode link. Also please used https://flutter.io/get-started/codelab/#step-1-create-the-starting-flutter-app link to update existing code with first flutter application and documentation about files in details.
3. Run application on simulator: Also this cover well documentation https://flutter.io/get-started/test-drive/#vscode link.
4. Understanding basic widget: As it is already cover (in first post) about widgets. As flutter application build using widget or widgets tree.
Widget Catalog link : https://flutter.io/widgets/
a. StatelessWidget: Stateless widgets are immutable, meaning that their properties can’t change — all values are final.
b. StatefulWidget: Stateful widgets maintain state that might change during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget class that creates an instance of 2) a State class. The StatefulWidget class is, itself, immutable, but the State class persists over the lifetime of the widget.
c. Other basic widgets: Most common widget used Container, Row, Column, Image, Text, Icon, Scaffold, appbar, FlutterLogo, Placeholder etc. Please refer below link in details
Link basic widget: https://flutter.io/widgets/basics/
d. Material Components Widgets: As Flutter already provided in-built Material components. Material Components Widgets provide very cool material design Widgets like Scaffold, Appbar, BottomNavigationBar, TabBar, TabBarView, MaterialApp, WidgetsApp, Drawer, Buttons, Input and selections, Dialogs, alerts, and panels, Information displays, Layout.
e. How to approach flutter login screen UI design: To design login screen used different widgets to design screen. please refer below screen, which cover how design widget tree.
5. Develop flutter login screen
- Application : Create a new file app which starting point of application. app file holds app bar and other widgets tree.
