Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Uploaded bynicholasb1537
13 views

Flutter Basics for Web Developers: Stateless vs Stateful Widgets

Slide used for GDGHK Flutter Study Group session titled Flutter Basics for Web Developers: Stateless vs Stateful Widgets. This slide contains what is Flutter, what advantage it has over React Native, and OpenAPI introduction to help bridge gaps between front-end and back-end teams when deciding on API contracts. Supplementary notes link: https://nbenedictcodes.com/notes/2026-08-07-gdghk-flutter-study-group Event link: https://gdg.community.dev/events/details/google-gdg-hong-kong-presents-flutter-basics-for-web-developers-stateless-vs-stateful-widgets/

Software◦
Related topics:
Insights on Software Development• Mobile App Insights•
Download to read offline
Flutter Study Group Flutter Basics for Web Developers: Stateless vs Stateful Widgets
● Part of the Google Developer Group (GDG) global network fostering innovation and collaboration. ● 1,000+ chapters worldwide ● Connect, learn, and grow. ● Organizes workshops, hackathons, and meetups on cutting-edge technologies ● Bring positive impacts through projects and knowledge sharing ● Current Topic focuses: AI/ML, Flutter, and more
● 2 YoE in Web Development ● Recently getting into mobile development Nicholas Benedict - GDGHK Helper ^ https://nbenedictcodes.com/
Table of Contents 1. Expected Outputs 2. What We’ll Learn 3. Flutter Introduction 4. Build Along 5. Introducing OpenAPI
1. Expected Outputs ● A mock-up of Pokédex ● Lists the first 25 entries from Pokédex
2. What We’ll Learn ● What Flutter is and Why Flutter over other choices ● Building with Stateless Widgets ● Adding images and fonts into a Flutter app ● Fetching data over the network ● Creating structured data from Fetched Data ● OpenAPI and its tooling for developer productivity
3. Flutter Introduction - What is Flutter ● Developer tooling to create cross-platform mobile applications ● Solves pain point of maintaining multiple codebase for both iOS and Android platforms ● Comparable to React Native from Meta
3. Flutter Intro - Why Flutter over React Native Pros: ● Genuinely Consistent UI compared to React Native ● Good amount of Widgets to start with Cons: ● A steeper learning curve compared to React Native (Dart vs JavaScript/TypeScript) ● Less perceived demand of Flutter developers in Hong Kong
Prerequisites: ● Flutter SDK configured with your IDE of choice (https://docs.flutter.dev/install/quick) ● A smartphone w/ USB cable (optional, chrome can be used as a fallback) 4. Build Along
4. Build Along - Step-by-Step Instructions https://nbenedictcodes.com/notes/2026-08-07-gdghk-flutter-study-group
● A machine-readable contract document between client and server ● Used to bridge gaps between cross functional teams ● Created by two methods: ● Code-First (e.g., Swagger Integration in FastAPI, NestJS) ● Design-First (e.g., by-hand or ApiFiddle) 5. Introducing OpenAPI
^ https://shorturl.at/NtjE9 ^ https://editor.swagger.io ^ https://openapi-generator.tech/docs/generators/dart 5. Introducing OpenAPI
Upcoming Workshop from Flutter Hong Kong Friday, Aug 14th 2026 19:00 - 20:30 GMT+8
The End Thank you for your attention!! Any inputs or questions that you have?