Greetings Dear Steemit Team!
First of all I want to thank the Steemit Team for bringing new and innovative ideas for the growth and increased engagement of the platform. It is indeed the most awaiting and the wonderful opportunity for the whole steemit community to contribute in this new innovative program. I am excited to join the teaching team for the season 20 as a Flutter Mobile Application Developer.
I want to share my mobile application development knowledge with the steemit community and to the entire world through steemit. I was anxiously waiting for the opening of the new recruitment for the teaching teams to teach mobile application development to everyone who is interested. Nowadays every business needs mobile application for the better user experience. So it will be great to teach people about mobile application development.
And choosing flutter for mobile application is of great use where single code base works for both the Android and iOS operating system. Moreover that code also works on the web. So by writing single code we develop application for the three different operating systems at once.
I will teach students basics of dart programming language which is used in flutter. After that I will cover application development from scratch to advance. I will give practical tasks and a complete application development project for each week to explore the understanding of the weekly lesson. After attending this course all the students will be able to develop their own mobile applications.
I am Muhammad Faisal with the steemit username @mohammadfaisal. I joined steemit platform in 2018. I am an old user of this platfrom.I have actively worked in different programs of the steemit platform. But because of some issues and family problems I had to turned it off for some time and my father also died. I have the experience of running a community as an admin as well. I have worked in different communities especially in the steemit crypto academy and I became the winner of the weekly crypto academy lesson. After this Steemit Pakistan hired me as a crypto professor to deliver some crypto related knowledge to the steemians.
I am a software engineer and flutter developer. I like to develop mobile applications professionally. I am also a part time web developer. It is my passion to develop mobile applications. I have developed different applications for the clients. I developed COVID-19 tracker application. It tracks all the covid-19 related data country wise. It shows all the deaths, infected, and recovered persons throughout the world as well as for each country. I also developed WhatsApp clone. And If I get a chance I will also teach the students to make the Whatsapp UI Clone. Everything will be delivered in an easy way so that all the students can easily learn and then implement their learning to complete the weekly tasks and project.
Three examples of the weekly lessons are given below:
Week 1: Introduction to Flutter and Dart Basics
Topics:
- Introduction to Flutter: What it is and why we use it?
- Setting up the development environment (Flutter SDK, IDE, emulators).
- Overview of Dart programming language.
- What is dart pad?
- Basic Dart syntax: Variables, Data Types, and Functions.
- Introduction to Flutter widgets.
- How to connect physical device to Android Studio for the live testing of application?
Tasks:
Introduction to Flutter and Setting Up the Environment. Write a short paragraph about what Flutter is, its benefits, and why it is used for mobile app development. Include how it differs from other frameworks. Install Flutter SDK, set up an IDE (e.g., Visual Studio Code or Android Studio), and configure an emulator or physical device for testing.
Access DartPad and perform the following:
Write a function that prints numbers from 1 to 100. For multiples of 3, print "Steem" for multiples of 5, print "TRX" and for multiples of both, print "Steemit.com".
Create a Dart function that calculates and returns the factorial of a given number. Test the function with different inputs.
Connect a physical Android device to the computer and enable developer mode and USB debugging. Configure Android Studio to recognize the connected device and run a Flutter app on it. Run a basic Flutter app on the physical device and verify its functionality.
Project:
Sign Up and Log In Screen: Create a basic Sign Up and Log In Screen interface. This will introduce the students to learn and understand the basic structure of mobile application development.
Learning Outcomes: Students will understand the basics of Flutter and Dart, setting up their development environment, and creating a foundational Sign Up and Log In screen.
Week 2: Building Layouts in Flutter
Topics:
- Understanding Flutter's widget tree.
- State Management - Stateless and Stateful Widgets.
- Commonly used widgets: Container, Column, Row, ListView, Icons(PrefixIcon and SuffixIcon), Buttons, Image, CircleAvatar etc.
- Introduction to Flex and SizedBox.
- Understanding padding, margins, and alignment.
Tasks:
Create a Simple Layout with Column and Row Widgets. Create a simple UI that displays three text widgets vertically using a Column. Inside one of the Column children, add a Row that contains three icons aligned horizontally. Add some space between the text widgets using SizedBox.
Build a Stateful Counter App. Create a StatefulWidget that displays a number in the center of the screen. Add two buttons, one to increase the number and one to decrease it. Update the state of the app when the buttons are pressed.
Create a List of Items using ListView. Create a list of strings (e.g., a list of fruits). Display this list in a scrollable ListView. Each item in the list should be displayed as a Text widget inside a Container with padding and margin.
Explore Flex and Alignment with a Responsive UI. Create a layout where three Container widgets are displayed in a row. Use Expanded to make one Container take up twice the space of the others. Use alignment properties to center the content within each Container.
Project:
Profile UI: Build a simple profile screen layout using various Flutter widgets. The screen should include a round profile image, social icons in the horizontal alignment, text as name, and buttons representing his different skills and attributes. These all should be aligned using the layout widgets discussed. Use SizedBox where needed.
Learning Outcomes: Students will gain proficiency in building layouts using Flutter’s widget tree, managing state with Stateless and Stateful widgets, and aligning elements using common layout widgets like Column, Row, and SizedBox. They will also be able to create a simple profile UI.
Week 3: Handling User Interaction and Navigation
Topics:
- Handling user input with TextField, TextEditingController, Buttons, and Gestures.
- Managing state with Stateful widgets.
- Introduction to routing and navigation in Flutter.
- Passing data between screens.
- Bottom Sheet Pop up
Tasks:
Design a simple form with a TextField where users can enter their name and a Button to submit the form. Use TextEditingController to retrieve the text from the TextField and display it on the screen when the button is pressed.
Create multiple screens and navigate between them. Design two screens—HomeScreen and DetailsScreen. Use Navigator.push() to navigate from the HomeScreen to the DetailsScreen when a button is pressed.
Modify the previous task to pass a string from the main screen to the second screen and display it there. Add an input field on the main screen to enter text, and pass this text to the second screen.
Implement a bottom sheet pop up. On the screen add a button to navigate from that screen to bottom sheet. And add some data to display on the bottom sheet such as name, country, age, gender, etc.
Project:
- Car Loan Calculator App: Develop a simple car loan calculator app where users can input loan details (like the loan amount, interest rate, and loan term) and view the calculated monthly payment on a bottom sheet. The bottom sheet should include the loan amount, interest rate, loan term, and the calculated monthly payment.
Learning Outcomes: Students will learn how to handle user interactions with TextFields and Buttons, manage state, and implement routing and navigation between screens. They will also gain experience in displaying calculated results using a bottom sheet, as demonstrated in the car loan calculator app project.
These are the three examples of the weekly lessons and much more is to come in the next weeks. I have decided to add making complete WhatsApp clone UI in the next weeks as mentioned above. And after this course students will be able to make basic applications and user interfaces. It will help the students to make all types of applications with just single code. The code will be able to run on Android, iOS, and Web.
Conclusion
Over the course of this Flutter Mobile Application Development program, students will embark on a transformative journey, starting with the basics of Dart programming and Flutter, gradually moving towards more complex and practical applications. By the end of this course, students will have a solid foundation in Flutter and Dart, enabling them to develop mobile applications that can run seamlessly on Android, iOS, and the web. The structured approach, with weekly tasks and projects, ensures that students not only grasp the theoretical aspects but also gain hands-on experience in building real-world applications. By the end of the program, students will be equipped with the skills to create interactive, responsive, and visually appealing mobile applications. They will also be prepared to tackle more advanced Flutter projects, including the development of complex user interfaces such as a WhatsApp clone, further enhancing their portfolio and career prospects in mobile app development.
| Social | Handle |
|---|---|
| Discord | mohammadfaisal7 |
| Telegram | mohammadfaisal7 |