Mobile Act Nagoya #10でのLT資料です

1. Introduction to Flutter
Mobile Act NAGOYA #10

2. • (@k_ryuichirou)
• Nagoya.Swift+ / Nagoya.cloud.first
• iOS
• Bot

3. 1. Nagoya.Swift+
• 3
• next 17. Apr.
2. Nagoya.cloud.first
• ( )
• next TBD (June))

4. Introduction to Flutter
1.About Flutter
2.How to develop apps with Flutter
3.Application archtecture with Flutter

5. Flutter is
Google’s mobile UI framework for crafting high-
quality native interfaces on iOS and Android in
record time. Flutter works with existing code, is
used by developers and organizations around the
world, and is free and open source.
from Flutter

6. Hamilton
• Google
• Android & iOS
• Firebase

7. CARTUNE
• Android / iOS
Flutter
• Flutter/Dart

8. Introduction to Flutter
1.About Flutter
2.How to develop apps with Flutter
3.Application archtecture with Flutter

9. Install (macOS)
$ cd ~/development
$ wget https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.2.3-beta.zip # >500MB
$ unzip flutter_macos_v0.2.3-beta.zip
$ export PATH=`pwd`/flutter/bin:$PATH
from Get Started: Install on macOS - Flutter

10. IDE
1.Android Studio (or IntelliJ IDEA) + Dart/
Flutter plugin
2.VSCode + dart code plugin
• iOS XCode
• Android Studio iOS

11. Create New App
# Short
$ flutter create <YOUR_AMAZING_APP_NAME>
# Long
$ flutter create --org institute.flutter
-i swift
-a kotlin
--description 'Description of your amazing app'
your_amazing_app

12. Hello, world
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}

13. Introduction to Flutter
1.About Flutter
2.How to develop apps with Flutter
3.Application archtecture with Flutter

14. Everything is widget
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget { // Widget
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget { // Widget
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}

15. class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

16. Demo

17. More Widgets (Material Components Widgets)

18. More Widgets (iOS)

19. Design patterns
1.MVP
2.Redux
Ref. brianegan/flutterarchitecturesamples: TodoMVC
for Flutter

20. How to learn
1.Google Codelabs
2.Get Started: Overview - Flutter
3.Magic of Flutter
...and much more youtube videos.

21. Summary.
1.Flutter is mobile UI framework for cross-
platform apps.
2.Install flutter,
and flutter create your_amazing_app.
3.Every thing is widget.