Skip to content

J0rgeSerran0/Flutter-Samples

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

237 Commits
images
images
src
src
.gitignore
.gitignore
BLoC.md
BLoC.md
BLoC_Architecture.drawio
BLoC_Architecture.drawio
CSharp_to_Dart_quick_reference.md
CSharp_to_Dart_quick_reference.md
Flutter_3.md
Flutter_3.md
Flutter_Language_Specification_Draft.md
Flutter_Language_Specification_Draft.md
LICENSE
LICENSE
README.md
README.md

Repository files navigation

Windows Quick Installation Guide

Reference

Installation Guide

Go to theEdit the system environment variables

Go toEnvironment Variables

Edit thePathentry

Append the full path to Flutter. For example:C:\dev\flutter\bin

Open a console Window to test Flutter, writtingwhere flutter dart

Select all the parts that you have to install (android-sdk-license with Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, and others)

  • Run the commandflutter config --android-studio-dir= ""whereis the path where Android Studio is located. For exampleflutter config --android-studio-dir= "C:\Program Files\Android\Android Studio"

  • Open Android Studio

Open SDK Manager

Select the tab SDK Tools

Uncheck the option Hide Obsolete Packages, and select Android SDK Tools and Android SDK Command-line Tools

Press the OK button to install these packages

  • Execute the commandflutter doctor --android-licensesto check the licenses selecting the keyYto accept all pages

  • Runflutter doctorto check if all is installed correctly

image

Start here!

Executed underGitHub Gist

Android Studio

Error - Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this

To solve this issue you need to install Android SDK Tools and Android SDK Command-line Tools on SDK Manager

  • OpenAndroid Studio
  • OpenSDK Manager
  • Select the tabSDK Tools
  • Uncheck the optionHide Obsolete Packages,and selectAndroid SDK ToolsandAndroid SDK Command-line Tools
  • Press theOKbutton to install these packages

Execute the commandflutter doctor --android-licensesto check if the error still occurs then check theandroid_sdk_path\Android\SDK\cmdline-tools

If you find more than onelatestfolders, delete the last one and remane the otherlatestfolder (likelatest-2for example) tolatest

The error should disappear now

Xcode

Troubleshooting CocoaPods

Update to macOS 11.x or upper

On you mac, open a terminal window and execute the next command to know what type of macOS you have

system_profiler SPHardwareDataType | grep 'Model Identifier'

VERSION NAME DATE ANNOUNCED
RHAPSODY DEVELOPER RELEASE Grail1Z4 / Titan1U (Interno) January, 1997
MAC OS X SERVER 1.0 Hera (Interno) Unknown
MAC OS X DEVELOPER PREVIEW - May, 1998
MAC OS X PUBLIC BETA Kodiak (Interno) May, 2000
MAC OS X 10.0 Cheetah January, 2001
MAC OS X 10.1 Puma July, 2001
MAC OS X 10.2 Jaguar May, 2002
MAC OS X 10.3 Panther June, 2003
MAC OS X 10.4 Tiger May, 2004
MAC OS X 10.5 Leopard June, 2006
MAC OS X 10.6 Snow Leopard June, 2008
MAC OS X 10.7 Lion October, 2010
OS X 10.8 Mountain Lion February, 2012
OS X 10.9 Mavericks June, 2013
OS X 10.10 Yosemite June, 2014
OS X 10.11 El Capitan June, 2015
MACOS 10.12 Sierra June, 2016
MACOS 10.13 High Sierra June, 2017
MACOS 10.14 Mojave June, 2018
MACOS 10.15 Catalina June, 2019
MACOS 11 Big Sur June, 2020
MACOS 12 Monterey June, 2021
MACOS 13 Ventura June, 2022
MACOS 14 Sonoma June, 2023

Visual Studio Code

I useVisual Studio Codeas editor code

The extensions I use are:

Firebase

  1. Install Firebase CLIor using the automatic install scriptcurl -sL https://firebase.tools | bash
  2. Log into Firebasefirebase login
  3. Test that the CLI is properly installedfirebase projects:list
  4. Optional - update the CLI version (macOS)curl -sL https://firebase.tools | upgrade=true bash

Sharing and Testing the Code

  • To test the samples online, I am usingDartPad.There is aSharing Guidewith details about how to share your samples and code online for other people

Guides and Learning Paths

The Dart tool uses Google Analytics to report feature usage statistics and to send basic crash reports. This data is used to help improve the Dart platform and tools over time

To disable reporting of telemetry and analytics, run:

dart --disable-analytics
dart --disable-telemetry

Analytics reporting disabled. In order to enable it, run:

dart --enable-analytics

Flutter Commands

General commands

  • Get Flutter Helpflutter --help --verbose
  • Check Flutter Healthflutter doctor
  • Check the version of Flutter installedflutter --version
  • Upgrade Flutterflutter upgrade(to upgrade Flutter with the last stable version)

If you receive an error similar toUnknown flutter tag. Abandoning upgrade to avoid destroying local changes. It is recommended to use git directly if not working on an official channelwhen you execute the commandflutter upgrade,you could try the commandflutter upgrade --forceinstead. In this case and after do this, execute the commandflutter doctoras well to check that all is ok

Flutter App commands

  • Create a Flutter Appflutter create <app_name>
  • Analyze a Flutter Appflutter analyze
  • Run Unit Testsflutter testorflutter directory_testorflutter test <file_test.dart>
  • Install a Flutter Packageflutter pub add <package_name>
  • Get the Flutter packages for the projectflutter packages get
  • Get the Flutter project with the packages found in pubspec.yamlflutter pub get
  • Update the Flutter packagesflutter pub update
  • Run Appflutter run
  • List available emulatorsflutter emulators
  • Install Flutter App on a Deviceflutter install -d <device_id>
  • Build a Flutter Appflutter build <type_of_app>(for example:flutter build iosorflutter build apk)

Flutter Packages

Flutter Local Offline Databases

Flutter Online Databases

Flutter Backend

Flutter App Architecture and Project Structure

Main steps when we start a new Flutter App

The App Architecture will force us to define the layers and boundaries of the App The layers and boundaries will help us to define the folders and Project Structure

  1. Decide the App Architecture to use
  2. Choose the Project Structure

Notes about the App Architecture

In general is very important, and critical for complex apps or projects, decide the App Architecture before start a project, because it will help us to handle the bounders, complexity and productivity of it in the correct way

Popular or familiar App Architectures used long ago (and today), areMVC, MVP, MVVMandClean Architecture.To be honest,MVC, MVP and MVVMaredesign patterns,andClean Architecturedefines a set of rules and principles for complex solutions or projects, butare not good Architectures to use them with Flutter

In the other hand we have some alternatives:

  1. Bloc Architecturehas an important popularity.Bloc Libraryhas helped to adopt this Architecture for Flutter Apps. This Architecture gives us astrict set of rulesabout how to structure our Flutter Apps.Bloc Libraryrely onProvider Package,which is therecommended package for state management.More details aboutBLoC in Spanish

  2. Stacke Architecturebased in theStacked packageand inspired byMVVM.Stacked packagerely onProvider Package,which is therecommended package for state management

  3. Riverpod Package,created by theProvider Package's authorcould help us to create our own Architecture. This package is a good package fordependency injectionandstate management

  4. Custom Architecture, depending of our experiences. Good to be more flexible and cover all possibilities, because sometimes, a type of Architecture could be a good idea for a project, but a bad one for other project, so open your mind about that is possible that not all projects should be use the same type of Architecture always

Architecture Layers

Taking our App as an all, we could slice our App in four layers

  • Presentation Layer
  • Application Layer
  • Domain Layer
  • Data Layer

Flutter App Architecture

But we could think in a less complex Architecture with three layers only

  • Presentation Layer
  • Application Layer
  • Data Layer

Flutter App Architecture

UI Layerand/orPresentation Layer

This layer would store theWidgets,States,ControllersandCommands,and should be focused in thePresentation Logic

Application LayerorBusiness Layer,andDomain Layer

This layer would store theServices,Mappings,Components,Caching,Instrumentation,Processors,ConfigurationandModelsorEntities,and should be focused in theBusiness Rules (enterprise business rules and application business rules)

Data Layer

This layer would store theRepositories,DTOs,Data UtilitiesandData Providers,and should be focused in theData Accessand how the data is returned to the caller

The ideal scenario when we develop a new project, is organize our projects by a set of features (functional requirement,user story,ororiented to domain), and inside of each feature, their layers

When we create, edit/modify, or delete a feature, we can focus in the feature as an independent feature

And when we create our test coverage of each feature, we can focus in it to cover the unit tests with confidence

Later, we can explore the integration and acceptance tests too in the same way

Flutter App Architecture

Flutter App Architecture

References

Flutter Language Specification Draft

This is my own document about Flutter to help to the developer, to create their own Flutter samples. Is not a bible, just a helper document

You can find it here

Flutter Icons

Flutter custom icons generator

C# to Dart

C# to Dart (quick reference)

Flutter-Samples

Quick Flutter resources and samples

  1. Create the flutter projectflutter create <name>
  2. Overwrite thelibfolder with the sample code
  3. Optionalflutter packages getandflutter run

General Samples

#A30204All samples tested withFlutter 3

  • Add or Remove and element
  • Alert Dialog Box
  • Animated Builder
  • Animated Cross Fade
  • Animated Default Text Style
  • Bottom Navigation Bar
  • Button Full Width
  • Button Multiple Toggle Switch
  • Button Toggle Switch
  • Calculator
  • Circular Loading Indicator
  • Combo Box
  • Date Picker
  • Dialog Box with 2 buttons
  • Dialog Box with 3 buttons
  • Form Dialog Box
  • Future
  • Horizotal Toolbar
  • Http Get and Post
  • Icon Text
  • Linear Loading Indicator
  • ListTile with Rounded Borders
  • Load Base64 Image
  • Load JSON File
  • Load SVG Image
  • Login Page
  • Login Page With Release
  • Markdown Text
  • Opacity
  • Opacity with Linear Gradient
  • Play Sound File
  • Rating
  • Rounded Bottom Navigation Bar
  • Routes
  • Sqlite Sample
  • Switch Button
  • Switch Cover Button
  • Text Field Search Box
  • ToDo List

macOS Samples

#A30204All samples tested withFlutter 3

  • CheckBox with button
  • Tab with pages
  • ToolBar with button
  • ToolBar with text in the center
  • ToolBar with text only

Tests Samples

#A30204All samples tested withFlutter 3

  • Counter Test
  • Custom Exception Test
  • Exception Test
  • Sum Test

Quick Templates

Template without AppBar

This is a template of a Flutter app with a black screen. You can use it as a canvas of a blank app

import'package:flutter/material.dart';

voidmain() {
runApp(constMyApp());
}

classMyAppextendsStatelessWidget{
constMyApp({Key?key}):super(key:key);
@override
Widgetbuild(BuildContextcontext) {
returnconstMaterialApp(
debugShowCheckedModeBanner:false,
home:MyPageApp(),
);
}
}

classMyPageAppextendsStatefulWidget{
constMyPageApp({Key?key}):super(key:key);

@override
State<MyPageApp>createState()=>MyPageAppState();
}

classMyPageAppStateextendsState<MyPageApp> {
@override
Widgetbuild(BuildContextcontext) {
returnScaffold(
body:Container(
color:Colors.white,
child:constCenter(
child:Text(
'demo',
style:TextStyle(
color:Colors.pink, fontSize:48,fontWeight:FontWeight.bold),
),
),
),
);
}
}

Template with AppBar

This is a template of a Flutter app with an App Bar. You can use it as a canvas of a blank app

import'package:flutter/material.dart';

voidmain() {
runApp(constMyApp());
}

classMyAppextendsStatelessWidget{
constMyApp({Key?key}):super(key:key);

@override
Widgetbuild(BuildContextcontext) {
returnMaterialApp(
title:'Demo',
debugShowCheckedModeBanner:false,
theme:ThemeData(
primarySwatch:Colors.blue,
),
home:constMyHomePage(title:'Demo Home Page'),
);
}
}

classMyHomePageextendsStatefulWidget{
constMyHomePage({Key?key,requiredthis.title}):super(key:key);
finalStringtitle;
@override
State<MyHomePage>createState()=>_MyHomePageState();
}

class_MyHomePageStateextendsState<MyHomePage> {
@override
Widgetbuild(BuildContextcontext) {
returnScaffold(
appBar:AppBar(
title:Text(widget.title),
backgroundColor:constColor.fromARGB(97,60,90,200),
foregroundColor:Colors.white70,
),
body:Center(
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children:const<Widget>[
Text(
'demo',
style:TextStyle(
color:Colors.blue,
fontSize:48,
fontWeight:FontWeight.bold),
),
],
),
),
);
}
}

Flet

Framework that enables you to easily build real-time web, mobile, and desktop apps

Flet is language-agnostic, so anyone on your team could develop Flet apps in their favorite language. At the moment,Pythonis supported, and Go, C# are coming next

Write a monolith stateful app in Python only and get multi-user, real-time Single-Page Application (SPA)

Flet UIis built with Flutter

Requirements

  • An editor or your favorite IDE like Microsoft Visual Studio Code (no SDKs, dependencies or complex tooling)
  • Install fletpip install flet

Commands

  • Python -m venv venvto create a virtual environment
  • source./venv/bin/activateorsource./venv/Scripts/activateor.\venv\Scripts\activateto activate the virtual environment
  • Python name.pyto run the program
  • pip install fletto install flet
  • flet.\name.pyto run the app quickly
  • pip install flet --upgradeto upgrate flet

Samples to move from skeleton to functional

Basic Sekeleton

importfletasft

defmain(page):
pass

ft.app(target=main)

Hello World sample

importfletasft

defmain(page:ft.Page):
page.add(ft.Text(value="Hello Flet!"))

ft.app(target=main)

Hello World sample (Async)

importfletasft

asyncdefmain(page:ft.Page):
awaitpage.add_async(ft.Text(value="Hello Flet!"))

ft.app(target=main)

Main Window with standard properties

importfletasft

defmain(page:ft.Page):
page.window_width=360
page.window_height=640
page.window_resizable=False
page.padding=0

window_container=ft.Container(width=360,height=640,bgcolor=ft.colors.BLUE,alignment=ft.alignment.top_center)

awaitpage.add_async(container)

ft.app(target=main)

About

Quick Flutter resources and samples

Topics

android windows macos dart ios demo web cross-platform tips tricks desktop samples poc flutter flutter-apps dart-platform

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

3 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages