Skip to content
← All Skills
🦋

Flutter

FrontendOfficial Site ›

Cross-platform mobile framework — ใช้สร้าง fintech/banking apps ที่มี 20M+ users

What I Can Do

  • สร้าง cross-platform mobile apps (iOS + Android) ด้วย Flutter
  • พัฒนา Bank Jago app ที่มี 20M+ active users, 1M+ DAU
  • สร้าง customer onboarding flows สำหรับ fintech apps (XSpring, Saksiam)
  • Implement complex UI animations และ custom widgets
  • จัดการ state ด้วย BLoC / Provider pattern
  • ทำงานร่วมกับ overseas teams (Singapore, Indonesia)

Commands I Use Daily

bash
# run app บน connected device/emulator
flutter run

# run แบบ hot reload
# (กด r ใน terminal หลัง flutter run)

# build APK สำหรับ Android
flutter build apk --release

# build IPA สำหรับ iOS
flutter build ipa

# run tests ทั้งหมด
flutter test

# get dependencies
flutter pub get

# ล้าง build cache
flutter clean

# ตรวจสอบ environment setup
flutter doctor

# analyze code
flutter analyze

Widget Tree

ทุกอย่างใน Flutter เป็น Widget — UI สร้างจาก widget tree ที่ซ้อนกัน Flutter rebuild tree เมื่อ state เปลี่ยน แล้วเปรียบเทียบกับ tree เดิมเพื่อ update เฉพาะส่วนที่เปลี่ยน (reconciliation)

StatelessWidget vs StatefulWidget

  • StatelessWidget — ไม่มี mutable state, rebuild เมื่อ parent rebuild หรือ props เปลี่ยน
  • StatefulWidget — มี mutable state ผ่าน State object, เรียก setState() เพื่อ trigger rebuild
  • ใช้ StatelessWidget ให้มากที่สุด, StatefulWidget เมื่อจำเป็น

Layout Widgets

  • Column / Row — จัด widgets แนวตั้ง / แนวนอน
  • Stack — ซ้อน widgets ทับกัน
  • Container — กล่องที่ customize ได้ (padding, margin, decoration)
  • Expanded / Flexible — ควบคุมสัดส่วนใน Row/Column
  • SizedBox — กำหนด fixed size หรือเป็น spacer

State Management

  • setState — simple, built-in, เหมาะกับ local state
  • Provider — dependency injection + state management, recommended โดย Flutter team
  • BLoC — Business Logic Component, ใช้ streams, แยก logic ออกจาก UI ชัดเจน
  • Riverpod — evolved Provider, compile-safe, testable

BLoC Pattern

BLoC แยก business logic ออกจาก UI — Events เข้า, States ออก ผ่าน Stream ทำให้ testable และ predictable ตัวอย่าง: class AuthBloc extends Bloc<AuthEvent, AuthState> ที่ handle LoginRequested event — emit AuthLoading() ก่อน, แล้ว await authRepo.login(event.credentials), emit AuthSuccess(user) หรือ AuthFailure(e.toString()) เมื่อ error

Navigation & Routing

  • Navigator 1.0 — imperative: Navigator.push(), Navigator.pop()
  • Navigator 2.0 — declarative: Router, RouteInformationParser
  • go_router — popular declarative routing package
  • Named routes — Navigator.pushNamed('/profile')

Platform Channels

Platform channels ใช้เรียก native code (Kotlin/Swift) จาก Dart — สำหรับ features ที่ Flutter ไม่รองรับโดยตรง เช่น biometrics, specific hardware APIs

Forms & Validation

ใช้ Form widget กับ GlobalKey<FormState> — ข้างในมี TextFormField ที่กำหนด validator function สำหรับ validation เช่น check empty แล้วแสดง error message, ElevatedButton เรียก _formKey.currentState!.validate() ก่อน submit

Animations

  • Implicit animations — AnimatedContainer, AnimatedOpacity — ง่าย, ใช้ได้ทันที
  • Explicit animations — AnimationController, Tween — ควบคุมได้ละเอียด
  • Hero animations — shared element transitions ระหว่าง pages
  • Staggered animations — sequence ของ animations ที่ต่อเนื่องกัน

Testing

  • Unit tests — test functions, classes แยกจาก Flutter
  • Widget tests — test individual widgets ด้วย testWidgets()
  • Integration tests — test full app flows บน device/emulator
  • Golden tests — screenshot comparison สำหรับ UI regression

Performance

  • ใช้ const constructors เมื่อทำได้ — ป้องกัน unnecessary rebuilds
  • ใช้ ListView.builder() แทน ListView() สำหรับ long lists
  • Profile ด้วย Flutter DevTools — timeline, memory, widget rebuilds
  • Avoid setState ที่ high level — rebuild เฉพาะ subtree ที่จำเป็น

Related Skills

  • Dart — ภาษาที่ Flutter ใช้
  • React.js — component-based UI concept ที่คล้ายกัน
  • JavaScript — web development ที่ใช้ pattern คล้ายกัน