Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to flutter

187 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Introduction to flutter

  1. 1. Introduction to Flutter Mobile Act NAGOYA #10
  2. 2. • (@k_ryuichirou) • Nagoya.Swift+ / Nagoya.cloud.first • iOS • Bot
  3. 3. 1. Nagoya.Swift+ • 3 • next 17. Apr. 2. Nagoya.cloud.first • ( ) • next TBD (June))
  4. 4. Introduction to Flutter 1.About Flutter 2.How to develop apps with Flutter 3.Application archtecture with Flutter
  5. 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. 6. Hamilton • Google • Android & iOS • Firebase
  7. 7. CARTUNE • Android / iOS Flutter • Flutter/Dart
  8. 8. Introduction to Flutter 1.About Flutter 2.How to develop apps with Flutter 3.Application archtecture with Flutter
  9. 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. 10. IDE 1.Android Studio (or IntelliJ IDEA) + Dart/ Flutter plugin 2.VSCode + dart code plugin • iOS XCode • Android Studio iOS
  11. 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. 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. 13. Introduction to Flutter 1.About Flutter 2.How to develop apps with Flutter 3.Application archtecture with Flutter
  14. 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. 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. 16. Demo
  17. 17. More Widgets (Material Components Widgets)
  18. 18. More Widgets (iOS)
  19. 19. Design patterns 1.MVP 2.Redux Ref. brianegan/flutterarchitecturesamples: TodoMVC for Flutter
  20. 20. How to learn 1.Google Codelabs 2.Get Started: Overview - Flutter 3.Magic of Flutter ...and much more youtube videos.
  21. 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.

×