GDSC Summer Hackathon Getting started with Flutter

Transcript

1. Getting started with Flutter Speaker: Yujiro Kisu GDSC Tokyo Metropolitan University @yuyu_lab_tmu
2. Agenda Speaker: Yujiro Kisu GDSC Tokyo Metropolitan University @yuyu_lab_tmu • What is Flutter? ◦ What is widget? • Basic app setting • Lecture • Break (10 min.) • Add detail designs (More if we have time)
3. Flutter • What is Flutter? ◦ Tool for UI development (SDK) ◦ Uses Dart language ◦ Made by Google ◦ Multi-platform framework • Uses in this event ◦ Framework for an app ◦ Experience robust/quick app development ◦ Requirement in this hackathon
4. <img src=”https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#0”> What we make today
5. What is widget? • Unit for app UI • There are different types/functionalities • Customizable one by one • Widget can be nested in another widget nested in another widget nested in an.. • Widgets can send information to each other
6. Image: https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#0 Widgets
7. Join at slido.com #1712352 ⓘ Click Present with Slido or install our Chrome extension to display joining instructions for participants while presenting. https://app.sli.do/event/cTMXFAX8S7Jt3notKhBeD6
8. Flutter ‘environment’ setting • Name of the app • Flutter version • Locations of ◦ Assets ◦ Fonts ◦ Dependencies pubspec.yaml ⬅copy code from here More info: Change it to yours!
9. Flutter ‘proofreading’ setting ‘true’ makes it strict analysis_options.yaml ⬅copy code from here More info:
10. Flutter main ‘canvas’ • Main entry of a Flutter app • Write code here (this workshop) lib/main.dart ⬅copy code from here
11. F5 Checkpoint: Wait until everyone is finished
12. Import each package/file to use in ‘main.dart’ This is called when ‘main.dart’ is executed ‘runApp()’ runs ‘MyApp()’ Explanations 🚚
13. Explanations ‘extends’ creates a ‘copy’ from a ‘template’
14. Explanations MyApp ChangeNotifierProvider MyAppState MyAppState
15. Explanations MyApp ChangeNotifierProvider MyAppState MyHomePage Scafold Column Text Text
16. Let its super class (‘template’) know MyApp()’s identification Explanations Create a widget with a context MyApp MyHomePage MyApp MyHomePage
17. 10 min. Break ~18:43
18. ElevatedButton( onPressed: () { appState.getNext(); }, child: Text('Next'), ), Copy code from here ⬇ and where should we put?? Checkpoint: Wait until everyone is finished
19. void getNext() { current = WordPair.random(); notifyListeners(); } } Checkpoint: Wait until everyone is finished Copy code from here ⬇ and where should we put?? MyAppState
20. Wanna refactor this … ??
22. Checkpoint: Wait until everyone is finished Padding + Widget (Card)
23. Checkpoint: Wait until everyone is finished @override Widget build(BuildContext context) { final theme = Theme.of(context); // ← Add this. return Card( color: theme.colorScheme.primary, // ← And also this. child: Padding( padding: const EdgeInsets.all(20), child: Text(pair.asLowerCase), ), ); }
24. Checkpoint: Wait until everyone is finished @override Widget build(BuildContext context) { final theme = Theme.of(context); // ↓ Add this. final style = theme.textTheme.displayMedium!.copyWith( color: theme.colorScheme.onPrimary, ); return Card( color: theme.colorScheme.primary, child: Padding( padding: const EdgeInsets.all(20), // ↓ Change this line. child: Text(pair.asLowerCase, style: style), ), ); }
25. Checkpoint: Wait until everyone is finished mainAxisAlignment: MainAxisAlignment.center, ‘Center’ the ‘Column’ +
26. Let’s do More on Codelabs! Click here to go to Codelabs
27. お疲れさまでした！
28. Next up … Day4 Flutter & Firebase