Posts

Flutter 104 Introduction to BLOC

What is BLOC (Business Logic Component)? A component that converts incoming Events (Streams) to outgoing States (Streams).  Events - Inputs to a bloc e.g. in response of user interaction States - Outputs of a bloc and is part of application state.  Notified system to redraw UI with build() Transition - Change of state, consist of current, transition and next state Why Stream? Stream - "container" for asynchronous data Asynchronous Programming Future (computation that is not completed immediately) Vs Stream (sequence/iterable, instead of asking for it, will inform you of event that is ready) Receive by: await for (hint hint for loop) Streams: Single Subscription stream - listened once Broadcast Stream - more than one listener can listen at the same time and it can be listened again Methods that: Process stream and return a result, Modify by returning a new stream based on original, Transform and Listen which return StreamSubscript...
Post a Comment
Read more

Top 10 Function that puzzle developers new to Flutter (Darts)

Dollar sign ($)  -  $string1/{exp1} Putting a  dollar syntax/sign in front of a variable or expression would tell compiler to look at value of var/exp.  In essence,  String Interpolation. e.g. Input: String food1 = "Burger" String food2 = "sushi" print('My favourite food1 is $food and ${food2.upper()}'); Output: Burger SUSHI Cascade Notation  (..) Been seeing methods with double dots preceding e.g. ..add()/..remove() lurking around and can't figure out whether it is deliberate or typo.  Fret not, its not a typo. Cascade notation allows you to combine multiple method of the same class in an expression without repeating the classname/prefix. i.e. chain methods Example below: myTable.add("Name"); myTable.add("Address"); myTable.add("Mobile"); myTable.remove("Fax"); Cascade Notation: myTable..add("Name")..add("Address")..add("Mobile")..remove(...
Post a Comment
Read more

Forms in Flutter (Validator and UI)

How to create a form Widget with validators in 3 simple steps I. C8 Global key in a Stateful Widget II. Add Validator to TextFormField Widget III. With Form Key, see Current State and Invoke the validate method Step I: C8 Global key in a Stateful Widget class MyCustomFormState extends State<MyCustomForm> {   final _formKey = GlobalKey<FormState>();   @override   Widget build(BuildContext context) {     return Form(       key: _formKey,       child: HomePage());}} Step II: Add Validator to TextFormField Widget TextFormField(   validator: (form_value) {     if (form_value.isEmpty) {       return 'Please enter some text'}     return null; },); Step III: With Form Key, see Current State and Invoke the validate method RaisedButton(   onPressed: () {     if (_formKey.currentState.validate()) {       Scaffold...
Post a Comment
Read more

Singleton

Why build a Singleton? Singleton pattern ensures only one instance of a class is ever created and it provides a global access to the instance. How to build ? Unlike Java which uses identifiers like private/public identifiers, Darts precede method with a dash "_" to make class/instance private. A constructor is used to invoke the static private instance  _singleton  .  Note that you do not need the “new” keyword to invoke the constructor.  You can also make the instance public, by removing the dash in front of its name. 1. Building a Singleton: class Singleton {   static final Singleton _singleton = new Singleton._internal();   factory Singleton() {     return _singleton;   }   Singleton._internal(); } 2. Static field with getter class SingletonTwo {  SingletonTwo._privateConstructor();  static final SingletonTwo _instance = SingletonTwo._privateConstructor();  static SingletonTwo get ...
Post a Comment
Read more

Firebase Hosting and Web App

How to Host on Firebase 1. Create Firebase account on Google 2. Install node.JS 3. Open Command Prompt and Install Firebase: $ npm install -g firebase-tools 4. Log into Firebase and approve ("Y") and click agree after being redirected to Google login page in browser: firebase login 5. Upload Web Page Creation of Web Page 1. Editor Mac: Use Finder to search for TextEdit Application in Mac 2. Click on EditText, at the top of Screen, in dropdown of "TextEdit", click on preference and save as Plain Text. 3. Paste Sample Code: Sample Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} input[type=text], select, textarea {   width: 100%;   padding: 12px;   border: 1px solid #ccc;   border-radius: 4px;   box-sizing: border-box; ...
Post a Comment
Read more

Setting up Terminal in Android Studio for Flutter and Bash Profile (For Mac)

Does your Commands in Android Studio not worked? Fret not, all you need to do is the following from Command Prompt: 1. Do you have a Bash Profile?] Go into your  user folder in finder . The .bash_profile file should be findable there. ->  HD/Users/[USERNAME] To reveal hidden file, press: Command + Shift + . nano .bashprofile or nano .bash_profile 2. Paste the correct directory export PATH=~/ Users/rigmiklos/Documents/ flutter/bin:$PATH Red Text: Directory contain flutter folder Hint for Mac User: Double tap on the Flutter.exe in Flutter>Bin>Flutter, and press"Get Info" to get Directory. 3. Ctrl + X to exit (No, this is not for default paste function) 4. Press Y to save changes. 5. To reload source .bashprofile Advance Reading for Bash Profile Official Doc for Setting up To navigate around Mac Command prompt: ls: show folders cd "folder name": to change directory Solution: Run Flutter Doctor manually or by Terminal / Users/...
Post a Comment
Read more

Flutter Widget 101 Part 6 (Alert and Simple Dialog)

https://medium.com/@nils.backe/flutter-alert-dialogs-9b0bb9b01d28 https://stackoverflow.com/questions/50964365/alert-dialog-with-rounded-corners-in-flutter Dialogs In essence, dialogs are pop-up for further user verification/notification. There are few types of dialogs: AlertDialog  (rows of buttons below body). SimpleDialog  (handles scrolling of contents and no buttons below body). showCupertinoDialog  (iOS-style). showGeneralDialog  (allows customisations). showDialog () 3 Parameters. child is deprecated.  Return child from builder, example below. BuildContext context, Widget child,//deprecated WidgetBuilder builder, showDialog( context: context , barrierDismissible: true , builder: (BuildContext context) { return AlertDialog( content: new Text( "Welcome" ), actions: <Widget>[ new IconButton( icon: new Icon(Icons. launch ), onPressed: (){Naviga...
Post a Comment
Read more

Flutter Widget 101 Part 5 (Snackbars, Context, Builder and Key)

1. Aim Through Snackbar, understand Context and how to use builder to access any context of a widget. 2.Snackbar Code from Codelab If you use Scaffold.of(context), there will be Context Error "Scaffold.of() called with a context that does not contain a Scaffold" import 'package:flutter/material.dart' ; void main() { runApp( new MaterialApp(home: new SnackApp())); } class SnackApp extends StatefulWidget { @override _SnackAppState createState() => _SnackAppState(); } class _SnackAppState extends State<SnackApp> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text( "Snackbar exercise" ), ), body: new Center( child: new RaisedButton( onPressed: (){ final snackBar = SnackBar(content: Text( 'Yay! A SnackBar!' )); Scaffold. of (context).showSnackBar(snackBar); }, ...
Post a Comment
Read more

Installation/Importing

 When importing projects, "Dart SDK is not configured" error code may arise. It can be resolving by linking to  bin/cache/dart-sdk in Flutter folder. It usually happens with projects that were created in other machines. To fix this on Android Studio 3.1.3: File-> Settings (ctrl+alt+s) Languages and Frameworks -> Dart Check "Enable Dart support for the project..." In "Dart SDK path" click in "..." and navigate to flutter SDK directory. Under that directory you'll find  "bin/cache/dart-sdk" . This is the dart sdk path you should use. Click "Apply" Close the project and open it again (sometimes you need this step, sometimes doesn't) Tip 1: Having problem with fetching a package? Come across this error code: "A dependency may only have one source. sdk: flutter" This may be due to an a n indentation align with sdk (example below). dependencies : flutter : sdk : flutt...
Post a Comment
Read more

State

https://medium.com/flutter-community/flutter-state-management-setstate-fn-is-the-easiest-and-the-most-powerful-44703c97f035
Post a Comment
Read more

Animation

Animated Container https://medium.com/flutter-community/flutter-animated-series-animated-containers-52a5d52c0ad3
Post a Comment
Read more

Registration and Login Page

https://www.youtube.com/watch?time_continue=6&v=wmHT4EUnA-I
Post a Comment
Read more

Resource

Basic Free Udemy Course Learning Free Udacity Course MTechViral Medium Articles Sample App Github Medium Articles Flutter Tutorial Handbook Reference Material Official Document Google Codelabs Community Flutter at Gitter Let's Flutter with Darts at Facebook Latest Development Flutter at Reddit FlutterDev at Twitter
Post a Comment
Read more

App1:

https://medium.com/flutter-io/zero-to-one-with-flutter-43b13fd7b354
Post a Comment
Read more

Darts: Converting Fat Arrow Syntax into elaborate syntax

The fat arrow is a short hand for creating a new symbol. Many articles talks about how to convert declaration of function into fat arrows.  But not vice-versa. Lets talk about an example in Google Codelabs and show the 2 simple steps to do so. Original Code Navigator. push (context, MaterialPageRoute(builder: (context) => DetailScreen(dtodo: todos [index]),),); 1a. Replace fat arrow by { Navigator. push (context, MaterialPageRoute(builder: (context) => { DetailScreen(dtodo: todos [index]),),); 1b. Isolate the another end of the function and close it with } Navigator. push (context, MaterialPageRoute(builder: (context) => { DetailScreen(dtodo: todos [index]), } ), ); 2.Add Return and replace the , by ; Navigator. push (context, MaterialPageRoute(builder: (context) => {  return DetailScreen(dtodo: todos [index]) , ;} ), ); Navigator. push (context, MaterialPageRoute(builder: (context) { return DetailScreen(dtod...
Post a Comment
Read more