FlutterアプリのUI/UX改善例

 FlutterアプリのUI/UX改善例

Flutter Meetup Osaka #3の発表資料です。
「FlutterアプリのUI/UX改善例」
#flutter #flutterjp #flutter_osaka

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

May 22, 2020
Tweet

Transcript

  1. 2020.05.22 Kenichi Kambara (@korodroid) FlutterΞϓϦͷUI/UXվળྫ Flutter Meetup Osaka #3

  2. About me •Mobile App Development •Technical Speeches •Technical Writings •[Official]

    Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
  3. ToDoΞϓϦ

  4. UI/UXվળྫ 1. ڞ༗ػೳͷૢ࡞ੑվળ
 2. Ξχϝʔγϣϯ௥Ճ


  5. 1. ڞ༗ػೳͷվળ

  6. 1. ڞ༗ػೳͷվળ ৄࡉը໘ʹભҠͯ͠ γΣΞ Ұཡը໘͔Β γΣΞ

  7. flutter_slidable by romainrastel.com https://pub.dev/packages/flutter_slidable

  8. ࣮૷αϯϓϧ child: Slidable( actionPane: SlidableDrawerActionPane(), actionExtentRatio: 0.25, actions: <Widget>[ IconSlideAction(

    caption: /*ڞ༗*/, color: Colors.indigo, icon: Icons.share, onTap: () => /*ڞ༗ॲཧ*/ ), ), IconSlideAction( caption: /*࡟আ*/, color: Colors.red, icon: Icons.delete, onTap: () => /*࡟আॲཧ*/), ), ],
  9. 2. Ξχϝʔγϣϯ௥Ճ(Ұ෦ൈਮ)

  10. animations by flutter.dev https://pub.dev/packages/animations

  11. animations by flutter.dev https://pub.dev/packages/animations

  12. ࣮૷αϯϓϧ child: OpenContainer( closedShape: const RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(32.0), ),

    transitionType: ContainerTransitionType.fade, transitionDuration: const Duration(milliseconds: 5000), closedBuilder: (BuildContext context, VoidCallback openContainer) { return ListTile( leading: icon, title: Text( title, style: TextStyle(color: Colors.white, fontSize: 18.0), ), onTap: () { openContainer(); }, ); }, openBuilder: (BuildContext context, VoidCallback _) { return SubScreen(); }, closedColor: Colors.blueAccent, openColor: Colors.blueGrey, ), ),
  13. •flutter_slidable
 https://pub.dev/packages/flutter_slidable •animations
 https://pub.dev/packages/animations Reference

  14. Please let me know if you have any requests 


    such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much