Flutter & Dart

On the first one we execute the function and pass the return value. However we should pass the pointer of the function, so that when user click the button it will call the function.

RaisedButton(
  child: Text('Answer 1'),
  onPressed: answerQuestion(), // Error here
),

RaisedButton(
  child: Text('Answer 1'),
  onPressed: answerQuestion, // Fix :)
),

State is data

Data can change

Adding leading _ (underscore) to the class name makes the class private.

• This is not a convention but a feature of the language.

final for final. StatelssWidget should be immutable, so variables inside the class should be final.

Other classes to be used need to be imported.

Convention: One widget per file

st in vscode: stateful and stateless widget snippet

class Person {
  String name;
  int age;

  Person({this.name, this.age = 30});

  Person.veryOld(this.name) {
    age = 60;
  }
}

Instead of creating classes for one-time-use data, dart maps can be used. (Different from Java maps)

See Also: Dart Maps

Adds all the values outside list, from nested lists.

final: Run time constant value. Value is unknown during developement. Can be initalized with different data. const: Compile time constant (also (explicitly) run time constant). Value is assigned on declaration. Both variable itself or value can be const.

var dummy = const ['Hello'];
dummy.add('Max'); // Doesn't work, value is const

const dummy = ['Hello'];
dummy = []; // Doesn't work, dummy is constant

It's better to split larger widgets to smaller ones.

onPressed() requires void function, but we need to call with parameters:

answerQuestion() is a function.

return Answer(answerQuestion); // call by pointer
// this will turn into this
return Answer(() => answerQuestion(answer['score'])); // call by value

Not a function, not a value. Dart feature that allows you to assign values dynamically.

String get resultPhrase {
  String reusltText;
  if (resultScore <= 8) {
    resultText = 'You did it';
  else if (...) {
    resultText = 'Something else';
  }
  else {
    resultText = 'Another thing';
  }
  return resultText;
}

Can be opened from vscode. Shows how every widget configured. Specific widget can be selected.

Card(Text ()) will wrap content, since Card depends on the inside size, and Text depends on the outside size.

List needs to mapped to widget

1. transactions.map().toList
2. transactions.map((tx) {}).toList (map takes a function)

3. transactions.map((tx) { return Card(child: Text(tx.title)) }).toList (returns the list of widget)

   More readable way of implementing;

transactions.map((tx) => Card(child: Text(tx.title))).toList;

Dart: $varibale in strings can call toString() function of variable
To call with dot, add curly brackets: ${tx.amount}

• There are no built-in easy way to format dates in flutter. For dart packages: https://pub.dev/packages.
• Third party package for formatting date-time (also localizing strings to different languages): intl

• add intl: ^0.15.8 to dependencies: in pubspec.yaml. (indentation is important here, add same level with flutter:)

  DateFormat().format(tx.date)
  DateFormat('yyyy/MM/dd').format(tx.date) // with pattern
  DateFormat.add_yMMMd().format(tx.date) //predefined constructors for specific patterns
  

final amountController = TextEditingController();

TextField(
  decoration: InputDecoration(labelText: 'Amount'),
  onChanged: ...,
  controller: amountController,
)

TextEditingController.text can give the text inside the input widget. (No need to set onChanged)

Convention:
If you have classes that are models for data, move them to lib/models.
Move widgets to lib/widget.

Dart: Consider creating a list with final. Still you can add new itmes into list. Because only the address (pointer) of the list is final, not itself.

Don't forget: onPressed: () {} paranthesis here

Don't forget: if named arguement or positinoal arguement

It should be wrapped whole body. It won't work for individual elements in body.

SingleChildScrollView(...);

To apply scrolling for particular widgets, height needs to be specified in a Container().

Or for lists instead of Column() use ListView() widget. ListView() must be inside a container.

To scroll row instead of column, scrollDirection: can be used.

To print only n values after . ;

amount.toStringAsFixed(2)

This method not simply prints first 2 digits after . but rounds the value.

In Scaffold()

AppBar(
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.add),
      onPressed: ...
    ), 
  ]
),

• In icon constructor, you can also custimize the apperance of icon.

In Scaffold();

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  ...
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

showModalBottomSheet{
  context: ctx,
  builder: (bCtx) {
    return Widget(...);
    )
  } 
}

If you want sheet dissapper when user clicks out of the sheet (background);

showModalBottomSheet{
  context: ctx,
  builder: (bCtx) {
    return GestureDetector(
      onTap: () {},
      behaviour: HitTestBehaviour.opaque, // to not to close when user clicks white area on the widget (?)
      child: Widget(...);
    )
  } 
}

By using widget.variable or widget.function keyword.

Add this at the and of the function that you submit the data.

...
Navigator.of(context).pop();

In MaterialApp(),

theme: ThemeData(
  primarySwatch: Colors.purple,
  accentColor: Colors.amber, // for better matching the colors see materaial app documentation
)
// ...
// in another widget

color: Theme.of(context).primaryColor, // since it is swatch, you can choose lighter or darker shades

primarySwatch is more complex object than primaryColor. It has material shades along with the main color.

Add pubspec.yaml.

• For global fonts in Materialapp;

theme: ThemeData(
  fontFamily: '...'  
)

• You can set the theme of any text to use predefined styles.

style: Theme.of(context).textTheme.title

• Add pubspec.yaml
• Image.asset('path')

• Container with height width or width/height factor.
• Can be used to add spacing by not specifying child.

Dart: list.where( () {} ) executes the function on every item on a list, if that function returns true, then the item is kept to returned list.

fit: FlexFit.tight or fit: FlexFit.loose to adding available space between widgets in a container.

• Adding Flex() and specifying flex: gives the available space proportionally according to flex value.

Adding a text in a fitted box, will ensure the box will stay the same size, even though the text grows. In that case font size will be decrease to fit in the box.

Allows to create objects which will give us a value in the future. (DatePicker, HTTP requests..)

showDatePicker(
...
).then(() {})

In main.dart

void main() {
  WidgetsFlutterBinding.ensureInitalized();
  SystemChrome.setPrefferedOrientation([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
  ]);

  runApp(MyApp());

}

• Widget Tree: configuration (rebuilds frequently)
• Element Tree: links widgets with rendered objects (rarely rebuilds)
• Render Tree: Rendered objects on the screen (rarely rebuilds)
• If a widget refers to MediaQuery and somehow if MediaQuery changes (like orientation or keyboard), then build() method is called.
• Rebuilding is not that bad, since its core feature of flutter and its optimized.