Flutter Master Class Travel App | Flutter 3.3.3 for Beginners to Advanced | iOS & Android Cubit
12,888From this tutorial we build a flutter cubit / bloc state management app. We will build it step by step. We will also build the ui and do api request. We will cover http get request and load the data using flutter cubit or bloc. We will also see how to use blocprovider and blocbuilder for state update. This covers building the model and API request. (not speed code, not the flutter way).
So this is a travel app.
👉📕Take the course on Udemy how to build a Chatting App
https://www.udemy.com/course/flutter-firebase-complete-chat-app/?referralCode=689C3231BAA17FEB69CB
👈
Buy a Macbook as I am using for Flutter app dev
https://amzn.to/3AsvPKn
Download the starter code with the assets
https://www.dbestech.com/tutorials/flutter-cubit-example-state-management
Flutter food delivery app
https://www.dbestech.com/tutorials/flutter-food-delivery-app-e-commerce-for-ios-and-android
You may download the complete code here
https://www.buymeacoffee.com/dbestech/e/95404
Patreons can download the complete code here
https://www.patreon.com/posts/73322187
Get the quick access to the code for the quiz app from Patreon
https://www.patreon.com/posts/63323762
HydratedCubit for storage
https://learnflutter.co/flutter-hydratedcubit/
https://youtu.be/Cnqwaz91yTc
Cubit to Load Json Data
https://youtu.be/0zzXFywGciw
How do you learn BLoC
https://www.dbestech.com/tutorials/how-do-i-learn-bloc-flutter
Buy me a coffee
https://www.buymeacoffee.com/dbestech/e/79321
Task management app
https://www.dbestech.com/tutorials/flutter-task-management-app-with-restful-api
Timestamps
0:00:00 Demo
0:01:20 Explain Carousel Slider
0:03:15 Create a new dart class welcome_page.dart
0:04:40 Use pageview.builder for carousel
0:08:16 Create list of images for the slider
0:10:15 boxfit for images
0:12:13 Building column for the carousel
0:13:37 Start building reusable widgets app_large_text
0:18:38 Start building reusable widgets for app_text
0:26:00 Start building reusable custom button
0:33:00 Start building the dots for the carousel
0:36:00 Select the dots with the slider
0:38:16 Start explaining the next page
0:39:21 Start building main_page.dart and other nav pages
0:43:20 Start building the bottomNavigationBar
0:44:49 Explain BottomNavigationbarItem
0:50:00 Build home_page.dart
0:51:40 Explain indexes for BottomNavigationbar
0:53:11 Style BottomNavigationBar
0:54:40 onTap Event for BottomNavigationbar
1:00:36 Done with bottomNavigationBar
1:01:50 Work on home_page.dart
1:05:00 Finish building the icon
1:08:20 Explain Tabbar and Tabbarview
1:09:41 Work on the tabbar
1:11:47 TabBarController with TickerProviderStateMixin
1:14:25 Style Tabbar
1:19:12 Building Custom Indicator for TabBar and Explain Decoration, createBoxPainter and Paint
1:27:00 Explain TabBar Indicator Position
1:30:51 TabBarView building
1:39:20 Building the small images in row
1:47:30 Build the map of images and text
1:49:00 Access the images and text using map.keys.elementAt(index) and map.values.element(index)
1:51:26 Idea of the the detail_page.dart
1:51:37 Page architecture stack and positioned widget
1:52:00 Restructure the project folders
1:53:48 Building the detail_page.dart
1:59:00 Header image for detail page
2:00:00 Building mid section of the detail page
2:05:00 Building the column layout for the detail page
2:12:00 working the star widgets
2:33:00 Work on the button selection
2:37:00 Change the button color onTap events
2:37:24 Done with the buttons
2:37:34 Build the description section
2:39:30 Start working on the bottom buttons
2:43:00 Working on resubale app large buttons responsive_buttons.dart
2:50:00 Start implementing cubit state management
2:50:45 Start explaining cubit
2:54:30 Start building cubit folder, cubit class and state class
2:55:20 Star working on states class app_cubit_states.dart
2:58:49 create app_cubits.dart class
3:02:00 Create BlocProvider
3:03:39 Build child widget for BlocProvider app_cubit_logics.dart
3:07:00 Conditional check the states using BlocBuilder
3:09:02 Using the first flutter cubit
3:10:00 Installing http
3:10:50 Work on the data_services.dart and work on the rest API and explain API request
3:16:00 Start building the model data_model.dart and explain model data
3:25:00 emit() state for loading and loaded state
3:28:00 Navigate to a new page using BlocProvider.of
3:32:15 Create a state for the loaded data and emit the state
3:35:30 Go to home_dart.file using BlocBuilder
3:35:51 Fix the responsiveness of the button responsive_buttons.dart
3:39:00 Grab the loaded data inside home_page.dart using BlocBuilder from state and replace the static data
3:44:00 Create a new state and emit() for detail_page.dart
3:48:00 Navigate to Detail Page using BlocProvider.of
3:50:00 Find the DetailPage() in app_cubit_logics.dart
3:52:00 Go back to the previous page
3:55:00 Update the data dynamically on detail_page.dart
4:02:30 Run the whole app
4:03:13 Fix the bottom navigation part for the main_page.dart and finish
Find me on twitter @dbestech