Flutterでチュートリアル画面を作ろう

44796ccd142bfb18614daedfcdb6f4e2?s=47 hokuto ibe
December 04, 2018

 Flutterでチュートリアル画面を作ろう

Flutterでチュートリアル画面を作ろう

44796ccd142bfb18614daedfcdb6f4e2?s=128

hokuto ibe

December 04, 2018
Tweet

Transcript

  1. 'MVUUFSͰ νϡʔτϦΞϧը໘Λ࡞Ζ͏ Ҫ෦๺ే!,BSNBDUPOJDT IUUQLBSNBDUPOJDTIBUFOBCMPHDPN

  2. ͓લ୭΍ͶΜ w Ҫ෦๺ేʢ͍΂ɹ΄͘ͱʣ w ೥݄೔ੜ·Εࡀ w 0CKFDUJWF$4XJGU%BSU w גࣜձࣾγϯϓϧ΢ΣΠॴଐ ʢἚ৓ͭ͘͹ʣ

    w Ұࣇͷ෕
  3. ࡞ͬͨɾܞΘͬͨΞϓϦ w ๭ܞଳձࣾΞϓϦ w ࣾ಺ࡏݿ؅ཧΞϓϦ w "*ͱձ࿩͢Δ೔هΞϓϦ w ϦϥೣͷϫϯΦϥΫϧʢॳ ͷݸਓΞϓϦʂʣ

    J04 "OESPJE
  4. ຊ୊

  5. ࡞ͬͨɾܞΘͬͨΞϓϦ w ๭ܞଳձࣾΞϓϦ w ࣾ಺ࡏݿ؅ཧΞϓϦ w "*ͱձ࿩͢Δ೔هΞϓϦ w ϦϥೣͷϫϯΦϥΫϧʢॳ ͷݸਓΞϓϦʂʣ

    J04 "OESPJE
  6. ΫϥΠΞϯτ͔Βɺ ΞϓϦͷ࢓༷ʹ͍ͭͯཁ๬͕དྷΔ

  7. ͦͷதͷ̍ͭ

  8. ॳճىಈ࣌ͷ νϡʔτϦΞϧΛ࡞Γ͍ͨ

  9. ॳճىಈ࣌ʹνϡʔτϦΞϧ ը໘Λݟ͍ͤͨʂ IUUQTHJHB[JOFOFUOFXTJPTBOESPJEPVUMPPL 0VUMPPLΞϓϦ

  10. .Z"QQΫϥε class MyApp extends StatelessWidget { @override Widget build(BuildContext context)

    { return MaterialApp( …………………………… initialRoute: '/', routes: <String, WidgetBuilder>{ '/': (BuildContext context) => RootView(), '/tutorial': (context) => TutorialView() }, ); } } JOJUJBM3PVUFϓϩύςΟ ˠىಈޙɺ࠷ॳʹදࣔ͢Δ8JEHFUΛࢦఆ SPVUFTϓϩύςΟ ˠ8JEHFUΛLFZͰඥ͚ͮ
  11. SPPU@WJFXEBSU import 'package:shared_preferences/shared_preferences.dart'; // ը໘ͷຊମ class RootView extends StatefulWidget {

    @override RootViewState createState() => RootViewState(); } class RootViewState extends State<RootView>{ @override void initState() { super.initState(); …………………… WidgetsBinding.instance.addPostFrameCallback((_) async { var prefs = await SharedPreferences.getInstance(); if (prefs.getBool('isFirstLaunch') ?? true) { await Navigator.of(context).pushNamed('/tutorial'); } }); } IUUQTQVCEBSUMBOHPSHQBDLBHFTTIBSFE@QSFGFSFODFT
  12. SPPU@WJFXEBSU import 'package:shared_preferences/shared_preferences.dart'; // ը໘ͷຊମ class RootView extends StatefulWidget {

    @override RootViewState createState() => RootViewState(); } class RootViewState extends State<RootView>{ @override void initState() { super.initState(); …………………… WidgetsBinding.instance.addPostFrameCallback((_) async { var prefs = await SharedPreferences.getInstance(); if (prefs.getBool('isFirstLaunch') ?? true) { await Navigator.of(context).pushNamed('/tutorial'); } }); } IUUQTQVCEBSUMBOHPSHQBDLBHFTTIBSFE@QSFGFSFODFT
  13. SPPU@WJFXEBSU import 'package:shared_preferences/shared_preferences.dart'; WidgetsBinding.instance.addPostFrameCallback((_) async { var prefs = await

    SharedPreferences.getInstance(); if (prefs.getBool('isFirstLaunch') ?? true) { await Navigator.of(context).pushNamed('/tutorial'); } }); IUUQTQVCEBSUMBOHPSHQBDLBHFTTIBSFE@QSFGFSFODFT 8JEHFUT#JOEJOHJOTUBODFBEE1PTU'SBNF$BMMCBDL ˠCVJMEϝιουޙʹॲཧΛ૸ΒͤΔࣄ͕Ͱ͖Δ 4IBSFE1SFGFSFODFTΫϥε ˠΞϓϦϩʔΧϧ্ʹύϥϝʔλΛอଘ
  14. ը໘ߏ੒ εϫΠϓͰભҠ ϖʔδϏϡʔ φϏήʔγϣϯόʔ υοτදࣔϏϡʔ εΩοϓϘλϯ

  15. UVUPSJBMEBSU class _TutorialState extends State<Tutorial> { List<Widget> _pageItems; final _controller

    = PageController(); @override void initState() { super.initState(); _pageItems = []; for (var i = 0; i < 7; i++) { Widget item = Container( alignment: Alignment.center, decoration: BoxDecoration( gradient: LinearGradient( colors: <Color>[Colors.blueGrey, Colors.orange], begin: Alignment.topLeft, end: Alignment.bottomRight)), child: Text("$i", style: TextStyle(fontSize: 30.0)), ); _pageItems.add(item); } }
  16. UVUPSJBMEBSU @override Widget build(BuildContext context) { double pageHeight = MediaQuery.of(context).size.height

    * 0.6; double buttonHeight = MediaQuery.of(context).size.height * 0.1; return Scaffold( appBar: AppBar( title: Text("νϡʔτϦΞϧ෩ը໘"),), body: SafeArea( child: Column( children: <Widget>[ Container( height: pageHeight, child: PageView( children: _pageItems, controller: _controller, ), ), ButtonTheme( height: buttonHeight, child: FlatButton( child: Text("εΩοϓ"), onPressed:(){ Navigator.of(context).pop(); }, ), ), Expanded( child: Container( alignment: Alignment.center, child: DotsIndicator( controller: _controller, itemCount: _pageItems.length, color: Colors.black, selectedColor: Colors.red, onPageSelected: (_) {}, ), ), ) ], ), ) ); }
  17. child: Column( children: <Widget>[ Container( height: pageHeight, child: PageView( children:

    _pageItems, controller: _controller, ), ), ButtonTheme( height: buttonHeight, child: FlatButton( child: Text("εΩοϓ"), onPressed:(){ Navigator.of(context).pop(); }, ), ), Expanded( child: Container( alignment: Alignment.center, child: DotsIndicator( controller: _controller, itemCount: _pageItems.length, color: Colors.black, selectedColor: Colors.red, onPageSelected: (_) {}, ), ), ) ], ϖʔδϏϡʔ φϏήʔγϣϯόʔ υοτදࣔ εΩοϓϘλϯ
  18. EPUT@JOEJDBUPSEBSU IUUQTHJTUHJUIVCDPNDPMMJOKBDLTPO GEECGBFBBDFG

  19. ׬੒ਤ

  20. w 4IBSFE1SFGFSFODFͰด͡Δ࣌ʹ JT'JSTU-BVODIGBMTFͰอଘ w શ໘1BHF7JFXʹͯ͠ɺ%PUT*OEJDBUPSΛ4UBDL Ͱ্ʹ৐͚ͬΔͷ΋ΞϦ w 1BHF7JFX$POUSPMMFSQBHFϓϩύςΟͰJOEFY ͕औΕΔ w

    IUUQTHJUIVCDPNLBSNBDUPOJDT qVUUFS@QMBZHSPVOE
  21. ͋Γ͕ͱ͏͍͟͝·ͨ͠