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