Flutter UI Tutorial - Designing Doctor Online Appointment App UI Design (Figma to Flutter)

Показать описание

#Doctor #Figma #Flutter #Appointment #Online #Hospital

Hi everyone, I am @abdulazizahwan from Indonesia,
In this video, we will learn Figma to Flutter with best practice. Which we are going to create a Doctor Online Appointment App Figma Freebies from Figma Community.

Designed by Gilang Segara

In this application, you can consult with great doctors from leading hospitals with various diseases. In addition, you can also make an appointment with a doctor before going to the hospital for an examination.

And in this section, we will implement many widgets and concepts, such as Hero Widget to make awesome transition animation with minimum setup, GridView to make Grid Menu, IntrinsicHeight and IntrinsicWidth, RichText, TextSpan and much more.

Stay tune @flutterdev !

🔖 JOIN FLUTTER COURSE 🔖
Build real, responsive applications! (Portfolio, E-commerce, Crypto App, Budget Tracker)
This course is designed for beginner to intermediate developers who want to build their future with Flutter

----------------------------------

----------------------------------

⏲ Timestamp
00:00:00 👨🏻‍💻 Chapters
00:00:06 Our main topic
00:00:43 The way to support me
00:01:05 UI Design overview
00:02:34 Time to Download Starter project
00:02:50 Open starter project with VSCode
00:03:20 Go to terminal ► flutter pub get
00:03:38 My VSCode theme
00:03:50 Starter project overview
00:05:36 App Theme
00:05:49 Constants for App
00:06:08 Setup Route
00:06:30 Setup HomeScreen
00:08:34 Setup HomeScreenNavbar
00:11:57 Back to HomeScreen
00:12:12 Setup Text Widget with Different Color
00:13:36 Setup Search Box
00:15:36 Setup GridView for Doctor App Menu
00:20:12 Setup List of Top Doctors
00:22:23 Setup Top Doctor Card
00:34:35 Setup DoctorDetailScreen
00:50:35 Setup Hero Animation
00:52:52 Conclusion
00:53:05 Closing & Thank you

----------------------------------

This video was made with great effort,
If you want to support me you can donate to the following link
👨🏻‍💻 BE A SUPPORTER

💰 PAYPAL

🧧 SAWERIA

🪙 TRAKTEER

☕ BUY ME A COFFEE

----------------------------------

🤙 JOIN MY DISCORD

----------------------------------

Hopefully, you would love this video.
I am so grateful if you want to hit the subscribe button. Thanks

📌 SUBSCRIBE ME

----------------------------------

🎬 ANOTHER PLAYLIST
Flutter UI Design Best Practices

Flutter Firebase CRUD Tutorial

Flutter Tutorial - Basic [EN]

----------------------------------

⚠️ FLUTTER & DART VERSION
- Flutter 2.8.1
- Dart 2.15.1

🔨 PACKAGE FOR THIS PROJECT

VSCODE THEME

📂 PROJECT FILE
Flutter Starter Code

Flutter Final Code

----------------------------------

👨‍💻 GEAR LIST & TOOLS
- MacBook Pro 2017 
( 8GB RAM 256GB Monterey OS )

- Acer Swift 3 SF314-54G-51ZK
( 12GB RAM 256GB SSD NvME M.2 Windows 11)

- Canon EOS M50 Sigma 16mm f1.4

- Logitech C922 Pro Webcam

- Microphone Condensor BM700

----------------------------------

📱 FOLLOW

----------------------------------

Thanks for Watching!
#Dart
#Android
#iOS
#Swift
#Kotlin