1. create a new flutter project
flutter create flutter_project_name
  1. install packages (already writtin in the pubspec = similar to npm install
flutter packages get
  1. types

int, double, num, void, String, null, Function, enum, List, boolean

  • every class is also a type
  1. variables

var, types

  1. classes
  • inheritance: extends => this class is based on other class

  • variables inside classes are called properties

  • functions inside classes are called methods

  1. class Constructor
void main(){
  var jaehyuk = Person("Jaehyuk", 2);
  print(jaehyuk);
}

class Person{
  String? name;
  int? age;

  Person(String inputName, int age){
    name = inputName;
      this.age = age;
  }
}
  1. import dependency
   import "package:packageName/file.dart
  1. positional argument vs named argument

*** all named argument is by default optional => hence to make it required, add required keyword

void main(){
  var jaehyuk = Person(inputName: 'jaehyuk', age: 2 );
  print(jaehyuk);
}

class Person{
  String? name;
  int? age;

  Person({required String inputName, required int age}){
    name = inputName;
      this.age = age;
  }
}

class Person {
  String? name;
  int? age;

  Person({required this.name, this.age});
}

image

  1. invoking function using anonymous function
    Column(
          children: <Widget>[
            const Text("This Question:"),
            ElevatedButton(
              // ignore: avoid_print
              onPressed: () => answerQuestion("1"),
              child: const Text("Answer 1"),
            ),
            ElevatedButton(
              // ignore: avoid_print
              onPressed: () => answerQuestion("2"),
              child: const Text("Answer 2"),
            ),
            ElevatedButton(
              // ignore: avoid_print
              onPressed: () => answerQuestion("3"),
              child: const Text("Answer 3"),
            ),
          ],
        ),
  1. array
    var questions = <String>[
      "What's is your favorite color?",
      "What's your favorite animal"
    ];
    questions[0]
    questions.elementAt(0)

    // this is because array in dart is an object
  1. states & stateful widget
  • extends StatefulWidget
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}
  • create NameState class
class MyAppState extends State<MyApp>{}

here, State is a generic class type

  • initialize state and a function that modifies the state
class MyAppState extends State<MyApp>{
 var questionIndex = 0;

  void answerQuestion(String question) {
    // when updating state, always use setState method/ function
    setState(() {
      if (questionIndex == 0) {
        questionIndex = questionIndex + 1;
      }
    });

    // ignore: avoid_print
    print(questionIndex);
  }
}

image

  1. private property => make sure somethings (properties + methods) inside the class cannot be manipulated externallly. => underscore is a dart convention that makes it private (only be accessed within the current file)

  2. custom widget => common practice is to have just one widget per file => use "st" shortcut to create stateless or stateful widget

  3. immutable warning => add final to property => final: cannot be reassigned (once build)

image

  1. "Lifting the state up" => to manage the state on the shared, on the common denominator

  2. Callback => passing function to a class constructor or anther function as a argument => why "callback": because the receiving widget/ class calls it in the future

  3. final vs const => const variables are compile-time constants, meaning that their values must be known at compile time. const variables are also single-assignment, just like final variables. However, because their values are known at compile time, they cannot be assigned a value that is determined at runtime. =>In general, you should use final for variables whose values are determined at runtime, while const should be used for variables whose values are known at compile time. => runtime constant => which are initialized when app starts, but thereafter they dont change

  var questions =  [...]
  questions = []

  // this is not possible
  const questions = [...]
  questions = []

  // no error during compilation (while coding), but throws error when run time
  var questions = const [...]
  questions = []

  1. Getter => it is a mixture of property and a method

  2. wrapping widgets (vsc extension) => Just right-click on a widget and press "Refactor".