Flutter rules the World: Widget, Stateful Widget and Stateless Widget!

Chúng ta cùng nhìn qua một app cơ bản được build bằng Flutter:

Life cycle

Sau khi được khởi tạo lần đầu tiên, statefull widget có vòng đời như được tóm gọn như sau

    Thông thường một app sẽ bắt đầu từ một StatelessWidget, nó cũng hiển thị thêm Stateless Widget MyHomePage, với các thuộc tính Text, color, style đều immutable.. đều chỉ khởi tạo thông qua method build đã được override để render graphic UI hiển thị lên màn hình cho người dùng

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Widget',
      theme: ThemeData(
        primarySwatch: Colors.grey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

      home: MyHomePage(title: 'Widget Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text(this.title),
    ),
    body: Center(
    child: Text('My home page app',
        style: Theme.of(context).textTheme.headline4)
    )
    );
  }
}

   Bây giờ chúng ta sẽ sửa lại một chút ở class MyHomePage, thay vì extends từ StatelessWidget, chúng ta chuyển sang extends StatefulWidget

class MyHomePage extends StatefulWidget {

  // Init construction
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  // This create state function will be called immediately when app instructed to build a stateful widget
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter;
  
  // Initializing default values of current state which can be used later under build context,
  @override
  void initState() {
    super.initState();
    _counter = _counter ?? 0;
  }

  // Change status _counter
  void _incrementCounter() {
    setState(() {
      _counter++;
      print('Increase state _counter to: $_counter');
    });
  }

  @override
  Widget build(BuildContext context) {
    print('Build widget with new state : $_counter')
    // These widgets such as Scaffold, Appbar, Center, Text ... you guys can read more in Flutter Documentation (https://flutter.dev/docs/reference/widgets)
    // If you are curious about Dart syntax, you can contact Chuan_hd, he is always glad to help you guy
    // I need to sleep now ~.~
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      //Draw center layout 
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Push the button to increase the number:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      //Draw Add button with _incrementCounter() function
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'When click here, the number will be increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Kết quả của chúng ta như sau:

   Mình xin được dừng bài viết hôm nay ở đây, ở phần sau chúng ta sẽ đi chi tiết hơn về Life Cycle của Stateful Widget cũng như State Management trong Flutter và xây dựng một ứng dụng cơ bảng bằng Flutter nhé.

Đối với thành viên của Flinters, những ai quan tâm hay hứng thú với mobile hay Flutter có thể liên hệ với team #flutter_rules_the_world để chúng ta cùng nhau học hỏi, trau dồi và phát triển hơn nữa nhé.