Our first Flutter app

Presented as the first ever presentation at Berlin's Flutter meetup.

Abstract: We're an agency for mobile app development, and we like building native iOS and Android apps. Yet, here we are, currently working on our first Flutter app. We'll share with you why we were thrilled to get started with Flutter and what we've learned so far - along with some preview of our work in progress app.

Transcript

1. Our first Flutter app Miriam Busch @miphoni Ralph Bergmann bergmann@karlmax-berlin.com
2. Outline • Why Flutter? • Our first Flutter project • Work in progress conclusions & opinions
4. Cost „There is no such thing as a free lunch.“
5. Redundancy Redundancy!
7. Cost There is no such thing as a free lunch?
8. Try Flutter How? ✅
11. /// create small card @override Widget build(BuildContext context) { onTap() { _onTapUp(_favourite.key); } return new Padding( padding: const EdgeInsets.symmetric(horizontal: 5.0), child: new Align( alignment: AlignmentDirectional.topCenter, child: new Material( type: MaterialType.card, elevation: 0.0, color: new Color(int.parse(_favourite.category.color)), child: new SizedBox( width: _cardWidth, height: _cardHeight, child: new InkWell( onTap: onTap, child: new Stack( children: <Widget>[ new Align( alignment: AlignmentDirectional.centerStart, child: new Padding( padding: const EdgeInsets.only(top: 8.0, left: 8.0, bottom: 8.0), child: new Image(image: new AssetImage(_favourite.key.iconOutline()), color: Colors.white), ), ), new Align( alignment: AlignmentDirectional.topEnd, child: new Padding( padding: const EdgeInsets.only(top: 8.0, right: 8.0, bottom: 8.0), child: new Image( image: new AssetImage(_isFavourite ? 'icons/ic_favlist_heart.png' : 'icons/ic_favlist_play.png'), ), ), ), new Align( alignment: AlignmentDirectional.bottomEnd, child: new Padding( padding: const EdgeInsets.only(top: 8.0, right: 8.0, bottom: 8.0), child: new Text( "5 min", style: TextStyles.keyFavTimeInfo.apply( fontSizeFactor: TextStyles.fontSizeFactor(_displayWidth), ), ), ), ), ], ), ), ),
12. Behind the scenes • Main use case: Meditation - screen off • Audioplayers plugin • Firebase • SQLite • flutter_built_redux generated by built_value • CI build using fastlane (called from Jenkins)
13. • Coding deeply nested layouts? • ; and missing features from Kotlin • Unfortunate timing for Android developers who just switched to Kotlin • Bare metal coding - redo from start? • Yes, Flutter was alpha when we started Draft conclusions ☹%
14. Draft conclusions • Getting started with Dart & Flutter √ • App behavior √ • Excellent support by Google & community √ • Expectations met √ • We no longer talk iOS vs. Android, but focus on actual features!
15. Draft conclusion crossplatform Cordova etc. ReactNative Xamarin Flutter multiplatform Kotlin No It depends/ Maybe… It depends/ Yesish..
16. What we have not figured out yet… • Crash reporting in production & resymbolization? • Settle on which flutter channel? • …
17. Thanks! Miriam Busch @miphoni Ralph Bergmann bergmann@karlmax-berlin.com
18. Credits for images • Karlmax Berlin GmbH & Co. KG • https://unsplash.com/@jpsmithuga • https://unsplash.com/@seteales • https://unsplash.com/@erol • Coach Yourself: 4 You Coaching GmbH