Getting started with Flutter Speaker: Yujiro Kisu GDSC Tokyo Metropolitan University @yuyu_lab_tmu 

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) 

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 

What we make today 

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 

Image: https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#0 Widgets 

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 

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! 

Flutter ‘proofreading’ setting ‘true’ makes it strict analysis_options.yaml ⬅copy code from here More info: 

Flutter main ‘canvas’ ● Main entry of a Flutter app ● Write code here (this workshop) lib/main.dart ⬅copy code from here 

F5 Checkpoint: Wait until everyone is finished 

Import each package/file to use in ‘main.dart’ This is called when ‘main.dart’ is executed ‘runApp()’ runs ‘MyApp()’ Explanations 🚚 

Explanations ‘extends’ creates a ‘copy’ from a ‘template’ 

Explanations MyApp ChangeNotifierProvider MyAppState MyAppState 

Explanations MyApp ChangeNotifierProvider MyAppState MyHomePage Scafold Column Text Text 

Let its super class (‘template’) know MyApp()’s identification Explanations Create a widget with a context MyApp MyHomePage MyApp MyHomePage 

10 min. Break ~18:43 

ElevatedButton( onPressed: () { appState.getNext(); }, child: Text('Next'), ), Copy code from here ⬇ and where should we put?? Checkpoint: Wait until everyone is finished 

void getNext() { current = WordPair.random(); notifyListeners(); } } Checkpoint: Wait until everyone is finished Copy code from here ⬇ and where should we put?? MyAppState 

Wanna refactor this … ?? 

No content

Checkpoint: Wait until everyone is finished Padding + Widget (Card) 

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), ), ); } 

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), ), ); } 

Checkpoint: Wait until everyone is finished mainAxisAlignment: MainAxisAlignment.center, ‘Center’ the ‘Column’ + 

Let’s do More on Codelabs! Click here to go to Codelabs 

お疲れさまでした！ 

Next up … Day4 Flutter & Firebase