About This Class
Responsive design is an important building block of app development. This is an important skill that you should master. This course will build your foundation on it.
The course will provide you not only theoretical foundation but also practical implementation of Responsive Design in a Flutter App. First, you will learn Responsive Design Guidelines, Patterns based on Google’s Material Design Responsive. And then you will learn how to implement these guidelines and patterns in a Flutter App. A full Flutter responsive app is demonstrated that works on Android, iOS and Web. You will be able to download the source code of this app at the end of this course. By the end of this course, you will be able to build a responsive app in Flutter that provides a great user experience on Android, iOS and Web.
For a multi-platform flutter app with a single code base, the app UI needs to adapt to any screen size and any device. In other words, it needs to be responsive.
Here are the challenges you will face when building a responsive app
How to handle your app UI for so many different screen sizes and devices on the market?
How many layouts would you implement for each app screen?
And what would change in each of these layouts?
Is it complicated and takes too long to build responsiveness?
In this course, we will address all these challenges.
By the end of this course, you will be able to build a responsive app in Flutter that provides a great user experience on Android, iOS and Web.
About Author
Naresh Idiga is a Senior Android Developer Consultant, working for London based clients and Founder at Roboto Systems. For over 14+years, he has been working with clients of various sizes from startups to big companies like Motorola and HTC. He has over 10 years of experience into mobile apps development alone.
Project Description
If you are new to Flutter, then please check the attached document ‘New To Flutter?.pdf’ to get started.
Places App Project Exercise:
Follow the responsive design guidelines and flutter widgets that we learned in our videos. Build the places app yourself. It should be a responsive app that works for Android, iOS and Web.
1. Download the Exercise_Resources.zip file. It contains the images and the model classes with sample data that you can use to build the places app assignment project.
2. Create a new flutter project by following the instructions here:
https://flutter.dev/docs/get-started/install/macos#web-setup
Copy the images and model classes into your new project and start developing the app.
3. Project requirements that you need to build.
Build the responsive home page and detail page as shown in the below previews.
Home Page Requirements:
Detail Page Requirements:
Solution Code:
Once you develop the app, you can download the PlacesApp_Solution.zip which has complete source code and compare it with your solution.
To build the project from the above downloaded solution code:
1. Unzip the file. Open command line terminal. Go to the directory “places_app_responsive” and run the command “flutter create .”
This will generate files for each platform and any other necessary files needed for the build. The actual solution code is in ‘lib’ directory.
2. Now open/import this project into VS Code or Android Studio. Go to ‘places_app_responsive -> lib’ directory, right click the file ‘places_responsive_app.dart’ and run it. Choose android/ios emulator or chrome as target. You should be able to the see the app running now.
Finally, Share any of your apps built using the guidelines from this course.
Skills in this Class:
• Technology
• Web Development
• Mobile Development
• IOS
• Responsive Web Design
• App Development
• Android
• Responsive Design
• Flutter
Size: 581MB