Slide 1
Slide 1 text
2020.05.22
Kenichi Kambara (@korodroid)
FlutterΞϓϦͷUI/UXվળྫ
Flutter Meetup Osaka #3
Slide 2
Slide 2 text
About me
•Mobile App Development
•Technical Speeches
•Technical Writings
•[Official] Evangelist at NTT TechnoCross
•[Private] iplatform.org
Kenichi Kambara (@korodroid)
Slide 3
Slide 3 text
ToDoΞϓϦ
Slide 4
Slide 4 text
UI/UXվળྫ
1. ڞ༗ػೳͷૢ࡞ੑվળ
2. ΞχϝʔγϣϯՃ
Slide 5
Slide 5 text
1. ڞ༗ػೳͷվળ
Slide 6
Slide 6 text
1. ڞ༗ػೳͷվળ
ৄࡉը໘ʹભҠͯ͠
γΣΞ
Ұཡը໘͔Β
γΣΞ
Slide 7
Slide 7 text
flutter_slidable by romainrastel.com
https://pub.dev/packages/flutter_slidable
Slide 8
Slide 8 text
࣮αϯϓϧ
child: Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
actions: [
IconSlideAction(
caption: /*ڞ༗*/,
color: Colors.indigo,
icon: Icons.share,
onTap: () => /*ڞ༗ॲཧ*/ ),
),
IconSlideAction(
caption: /*আ*/,
color: Colors.red,
icon: Icons.delete,
onTap: () => /*আॲཧ*/),
),
],
Slide 9
Slide 9 text
2. ΞχϝʔγϣϯՃ(Ұ෦ൈਮ)
Slide 10
Slide 10 text
animations by flutter.dev
https://pub.dev/packages/animations
Slide 11
Slide 11 text
animations by flutter.dev
https://pub.dev/packages/animations
Slide 12
Slide 12 text
࣮αϯϓϧ
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,
),
),
Slide 13
Slide 13 text
•flutter_slidable
https://pub.dev/packages/flutter_slidable
•animations
https://pub.dev/packages/animations
Reference
Slide 14
Slide 14 text
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