FlutterアプリのUI/UX改善例

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