FlutterアプリのUI/UX改善例

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

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