Flutter Playground

Playing around with flutter. Figuring out if it is for babies or not.

This app

Native Features

<img src="" width="250" height="auto">

Resources:

1. Travel Information app:
   • https://www.youtube.com/watch?v=pTJJsmejUOQ
2. Flutter and Dart - The Complete Guide:
   • https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps
3. Widget catalog:
   • https://flutter.dev/docs/development/ui/widgets

Continue

1. https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps/learn/lecture/14951040#content

Third Party libs

1. Dates
   • Intl: https://pub.dev/documentation/intl/latest/
2. Provider
   • https://pub.dev/packages/provider
3. HTTP requests
   • https://pub.dev/packages/http#-installing-tab-
4. SharedPreferences
   • https://pub.dev/packages/shared_preferences
5. Image Picker
   • https://pub.dev/packages/image_picker
   • Capturing an image
6. path_provider and path packages
   • https://pub.dev/packages/path_provider
   • Access to android/ios file system to save files
7. sqflite
   • https://pub.dev/packages/sqflite
   • https://pub.dev/packages/hive
   • Use SQLite on android and ios
8. Google maps
   • https://pub.dev/packages/location

Questions

1. Debugging
2. state
   1. Provider Pattern
   2. Bloc pattern?
3. architecture?
   • block pattern?
4. Testing?
5. Restoring list position? (after rotation/background or forward/back navigation)
6. Dialog behavior on rotation/background
7. ListView performance
   1. Does is load everything even if not visible?
      • ListView.builder() vs ListView(children: [])
8. Asynchronous work?
   1. async/await and Futures
      • This is basically the same as coroutines. Just instead of suspend functions you mark a line of code with await. Which tells the compile to wait until the Future is returned to move to the next line of code. I like this.
9. Memory leaks?
   • Can you leak memory?
     • Yes you can. And I have no idea how to detect.
   • how can you detect? (ex: Leak Canary on android)
10. Animations on navigation?
    • At this point everything I've seen just looks like an activity navigation. Which looks like crap.
11. APK / project size?
    • How does APK / project size compare with native?
12. SharedPreferences?
    • Shared preferences plugin https://pub.dev/packages/shared_preferences
13. Caching?
    • How does Flutter handle data persistence? (SQLite?...)
14. Push notifications
    • I heard this was difficult
15. Camera preview manipulation
    1. Capturing an image: https://pub.dev/packages/image_picker#-installing-tab-
    2. It's easy to take simple pictures. But far as I can tell there is no way to build a "custom camera" app. Something where you can apply funny filters, Augmented reality, etc...
16. Long-running services & WorkManager?
    • Suppose something that needs to execute even if the app closes or it's in progress when the app closes
17. Pagination?
    • I'm not sure how to handle pagination with Flutter?...
    • TODO:
      • Try querying a massive amount of list items (1000+) and displaying them. See if it struggles.
18. Google maps?
    • https://pub.dev/packages/location

What makes Flutter "Easier" than Native?

1. Dependency conflicts
   • With native, many dependencies do not work with other dependencies. For example, Navigation version 1.2.3 might not work with Fragments version 1.4.2 (not actual versions, this is just an example). This can cause MASSIVE headaches when developing. Especially if you are a beginner.
   • Flutter has basically one dependency for all Material design widgets. 'package:flutter/material.dart'
2. Beautiful prebuilt widgets
   • There is many prebuilt widgets designed for specific scenarios you run into on mobile. One example that comes to mind is the ListTile. It's awesome for list items as it contains a "leading", "subtitle", "title" and "trailing" param. These params orient the widgets you place inside them into specific positions. On Native you'd need to build a custom adapter and custom layout which is very time consuming.
3. ...

Things I like

1. Displaying images from network
   • super simple with no third party library needed
   • Without a third party on android this is not fun. I can honestly say I don't even know how to do that.

Day 13 (June 26)

1. Animations
   • I don't have a lot of experience with animations on native. But this seems complex.
2. Using the camera
   • use Image picker plugin https://pub.dev/packages/image_picker
3. Asking for permissions
   • This happens automatically it seems? Depending on the plugin you use. It did when I used the camera plugin.
4. Caching data with SQLite
   • sqflite plugin: https://pub.dev/packages/sqflite
   • This plugin isn't great. Room is definitely far easier to use. This reminds me of the old SQLiteOpenHelper thing that you used to use for SQLite on Android.

Day 12 (June 25)

1. Saving data locally (token for authentication)
2. Using providers to provide dependencies to other providers
   • ex: Providing Auth token from a provider to other providers
   • 263. Using the ProxyProvider and Attaching the token...
   • ChangeNotifierProxyProvider

Day 11 (June 24)

1. Did all basic CRUD operations today working more with futures. Not particularly impressed or un-impressed. Reminds me of Python. Does the job.

Day 10 (June 23)

1. Forms and TextFormFields
   • Reminds me of HTML forms. Cool how they built a Form widget with Form fields that are built to work together.
   1. This is surprisingly a lot of work. I don't think this is less code than native would be to create a screen for getting inputs from the user.
      • 222. Submitting Forms
      • Also dealing with the focus and doing form validation is a lot of work. Definitely this is not more concise than native.
   2. Form validation reminds me of django. You get a boolean that says if the form is valid or not, then take action or show errors.
2. FocusNode
   • Programatically decide where the focus goes after moving from Form fields
   • Can leak memory, need to dispose
3. Futures
   • 238. Futures and Async Code
4. HTTP requests
   • Reminds me of http requests with python. Basically the same.
5. Async and await
   • 241. Working with async and await

Day 9 (June 22)

1. Dismissible widget
   • used to "swipe out" items from a list. Very convenient and easy to use
   • Great animation
2. Started rebuilding my Local DB caching course app using Flutter
   • This is to help learn flutter with a project I've already done. (https://github.com/mitchtabian/Local-db-Cache-Retrofit-REST-API-MVVM)
   • So far, within about 2 hours I built the complete skeleton with navigation and static data.
3. Snackbars
   • Working with Snackbars was very easy.
   1. Simple to show
   2. Simple to hide if one was already showing and want to show a new one
   3. Simple to incorporate "undo" action
4. Dialogs
   • AlertDialogs are very easy to set up and use the input the user chose.

Day 8 (June 18)

1. Beginning "advanced" state management today.
2. Provider
   • https://pub.dev/packages/provider
   • Seems to be the equivalent of LiveData on native?
3. ChangeNotifier & "Provider Pattern"
   • ex: class ProductsProvider with ChangeNotifier
   • Helps to establish "behind the scenes" communication tunnels between widgets
   • ex: https://gist.github.com/mitchtabian/a87d9c7ab464c937af25b605f8c2cdb2
4. ChangeNotifierProvider
   • 190. Working with Providers and Listeners
   • For providing a global state provider to widgets lower in the hierarchy
5. Mixins
   • Like a generalized extension
   • Can use many mixins but only a single class extension
   • ex: Person extends Mammal with Agility, Consciousness
     • A person is a Mammal. But a person is not "Agility". A person has the ability to use Agility.
6. ChangeNotifierProvider.value(value:) vs ChangeNotifierProvider(create:)
   • for lists/reusing objects: ChangeNotifierProvider.value(value:)
   • for new views or stuff that is not reused ChangeNotifierProvider(create:)
7. Consumer with of Provider
   • https://gist.github.com/mitchtabian/9b0d00576b24f9eb2ed073de00c67030
   • Advantage:
     • Only the part of the widget tree that is wrapped with Consumer will be rebuilt. As opposed to using a global Provider which will rebuild the entire tree.

Day 7 (June 17)

1. onUnknownRoute
   • Basically this is the web equivalent of a 404 page.
   • MaterialApp param
2. onGenerateRoute
   • dynamically generate a route (could be used for dynamically generating screens)
   • MaterialApp param
3. Top Tabs
   • 170. Adding TabBar to the AppBar
   • https://gist.github.com/mitchtabian/d16b239d849f8d175d1f6801011dc0ef
   • DefaultTabController
   • This was very easy to set up and looks good. Much easier than setting this up natively. Very intuitive.
4. Bottom Tabs
   • 171. Adding a bottom TabBar
   • https://gist.github.com/mitchtabian/01c54ffb9362b592641349d7e0d7467b
   • Interestingly, setting tabs up on the bottom is much more difficult than tabs on the top. This is not intuitive.
5. Navigation drawer
   • 172. Adding a custom drawer
   • Drawer param in a scaffold
   • Pretty simple. But I wouldn't say this is necessarily simpler than on native.
6. removing items from backstack when navigating
   • Navigator.of(context).pushReplacementNamed(NAV_TABS_SCREEN)
   • This replaces the existing page on the backstack when navigating. This is equally simple on native (with Nav components).
7. State management
   • I have a lot of questions about state management at this point. Because in the course if we want to manage some kind of "global" property we have to pass it around widget constructors which gets very complicated. I believe later in the course I will learn a better system.

Day 6 (June 16)

1. End Expense Tracker app. Beginning to work on Naviga