Please enable JavaScript.

Coggle requires JavaScript to display documents.

Flutter (Flutter/Dart (Create a new project: flutter create project…

- - - - File Structures:
        lib/main.dart
        pubspec.yaml => contains libraries' setups
        
        Dart
        
        Variables
        
        var x = 10.2;
        double y = 12.3;
        String a = 'This\'s my pen';
        
        An object: var p1 = Person();
        print(p1); //only show "Instance of Person"
        
        Array of objects(Generics Type):
        var persons = <Person>[];
        
        1 more item...
        
        Object as key-value(Map)
        
        1 more item...
        
        Functions
        
        No need "void", no parameters' type:
        double add2Numbers(double x, double y) {
        return x + y;
        }
        
        Named arguments:
        double add2Numbers({double x, double y}) {....}
        call this function:
        add2Numbers(x: 11.0, y: 12.3);
        
        arguments with annotations:
        double add2Numbers({@required double x,
        required double y}) {...}
        
        1 more item...
        
        Class & object
        
        class Person {
        String name;
        int age;
        }
        
        constructor with named arguments:
        Person({this.name, this.age = 30});
        
        constructor with @required:
        Person({
        @required this.name,
        @required this.age = 30
        });
        
        Flutter
        
        Run a basic App
        
        Every app has a:
        void main() {...}
        lib/main.dart
        
        A Page/Screen has many Widgets
        
        StatelessWidget
        must implement build()
        
        1 more item...
        
        Basic app with Text, Button,
        and Scaffold widget
        
        Scaffold widget is inside MaterialApp:
        ..build...return MaterialApp(home: Scaffold(...))
        
        Scaffold(
        appBar: AppBar(title: Text('My appBar')),
        body: Text('This is body')
        )
        
        Scaffold's body can be Row, Column:
        body: Column(
        children: <Widget>[
        Text('The question ?'),
        RaisedButton(child: 'Answer 1', onPressed: null)
        ])
        
        1 more item...
        
        Basics Components
        
        Components with "child"
        
        Card is a "view", can overlap
        Card(
        color: Colors.red,
        child: Text('Hello')
        )
        
        Container has padding, border, margin:
        Container(
        margin: EdgeInsets.symmetric(
        vertical: 10, horizontal: 12)
        )
        
        1 more item...
        
        Components with "children"
        
        Column(
        children: <Widget>["card, container,..."]
        )
        
        Single widgets
        
        final editingController = TextEditingController()
        TextField(
        controller: editingController,
        onChanged: (text){setState...}//2-way data binding
        )