flutter.md

Flutter

Contents

• Flutter
  • Contents
  • Complete courses
  • Pending research topics/material
  • Specific how-tos and tutorials
    • Access device contact(s)
    • CI/CD for Flutter apps
    • Device orientation
    • Embed youtube video inline
    • Fonts (update family/size etc from code)
    • Forms
    • Install different flavours
    • Open particular whatsapp chat message
    • Routing
    • Splash screen and Launcher icon

Complete courses

• Learn Flutter & Dart to Build iOS & Android Apps - Maximilian Schwarzmüller

Pending research topics/material

• FlutterInteract (Dec 2019) (Review entire video)
• Adobe XD Flutter plugin
• Flutter Supernova
• Checkout Redrix in PlayStore
• flutter.gskinner.com
• Flutter Material Theming
• Rive (formerly Flare)
• Key Widgets
  • Matrix4 mtx.setEntry(3,2,0.001)
  • SingleChildRenderObjectWidget
  • Canvas & CustomPainer (drawVertices, drawAtlas)

Specific how-tos and tutorials

IMPORTANT: Please arrange all sections below this in alphabetical order!

Access device contact(s)

• native_contact_picker
  • Show contact picker to pick single contact
  • Only get name & phone
  • No permissions required
• contacts_service
  • Access entire contacts list
  • Access extra fields like email/image/address etc
  • Allows filtering by name
  • Requires contacts read/write permissions

CI/CD for Flutter apps

• Official Docs
• GitLab
  • Setup Gitlab CI in Flutter-Android Project
• GitHub
  • flutter_redux with TravisCI
  • CI/CD for Flutter Apps Using GitHub Actions
• codemagic (works with any VCS)
  • Official blog

Device orientation

• SystemChrome.setPreferredOrientations
• StackOverflow answer

Embed youtube video inline

• Flutube library
• Youtube Player Flutter library (supports API version 20 or more)
• Youtube Player library (supports all API versions)

Fonts (update family/size etc from code)

• Different fonts for different locales
• Controlling text height using StrutStyle

Forms

• When there are several input fields in a form, the widget of choice should be SingleChildScrollView > Column over ListView. This is because ListView removes widgets from the widget tree when they are scrolled out of view far enough, leading to a loss of data entered in those fields. (Reference)

Install different flavours

• Link #1
• Link #2
• Link #3
• Link #4

Open particular whatsapp chat message

• Flutter Open Whatsapp Library
• Using intent (no lib)

Routing

• Separate routing in different file

Splash screen and Launcher icon

• Quick icon mipmap generator

• SVG to vector asset converter (Prefer Android Studio's import tool over this)

• How to make a gradient background in splash screen (StackOverflow)

• Sample splash screen:

    <!-- launch_background.xml -->
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/splash_background" />
        <item android:drawable="@drawable/splash_graphic" android:gravity="center"/>
    </layer-list>
  
      <!-- splash_background.xml -->
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <gradient
            android:angle="90" android:endColor="#276b81" android:startColor="#55b692" android:type="linear" />
        <corners android:radius="0dp" />
  </shape>

• Splash Screen Activity Design (Youtube)

• launch_background.xml options

• Flutter 2019: Real Splash Screens Tutorial - Medium