Flutter widgets. Stateless, Stateful, Inherited.

Основні типи віджетів у Flutter

Flutter – це все про віджети. Це могутній інструмент для створення інтерфейсу користувача (UI) ваших додатків. Вони є основними блоками у Flutter UI. Flutter має три основних типи віджетів: Stateless, Stateful і Inherited.

Stateless

Stateless віджети – це основні елементи інтерфейсу користувача в Flutter, які не мають внутрішнього стану, що змінюється з часом.
Вони приймають конфігурацію через свої конструктори, які потім стають незмінними.

Ці віджети є простими і відтворюються без змін кожного разу, коли вони перебудовуються. Їх перебудова відбувається коли батьківський віджет змінюється, і це може впливати на конфігурацію поточного віджета.

Ось приклад Stateless віджета:

class MyStatelessWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Container(
      decoration: BoxDecoration(color: Colors.blue),
      child: Text('Hello, World!'),
    );
  }
}

У цьому прикладі, MyStatelessWidget створює текст 'Hello, World!' у синьому контейнері. Коли батьківський віджет MyStatelessWidget змінюється, MyStatelessWidget перебудовується з тими самими конфігураціями, тому текст та колір залишаються незмінними.

Stateless віджети є дуже корисними для частин вашого додатка, що не потребують взаємодії з користувачем або не змінюються з часом. Вони допомагають створювати прості, перевірені, відтворювані елементи інтерфейсу користувача.

З огляду на їхню простоту, Stateless віджети становлять велику частину віджетів, які ви будете використовувати під час розробки додатків на Flutter.

Stateful

Stateful віджети є ключовим елементом Flutter, що дозволяє створювати динамічні та інтерактивні додатки. Вони мають "стан", який може змінюватися впродовж життєвого циклу віджета, що дозволяє реагувати на події користувача або зміни в даних.

Stateful віджети включають два об'єкта:
- сам віджет (StatefulWidget)
- його стан (State).

StatefulWidget лише створює об'єкт стану і потім стає незмінним, тоді як State об'єкт зберігає змінні дані, які можуть змінюватися впродовж життя віджета.

Ось приклад Stateful віджета:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('You have pushed the button this many times: $_counter'),
          RaisedButton(
            onPressed: () {
              setState(() {
                _counter++;
              });
            },
            child: Text('Increase Counter'),
          ),
        ],
      ),
    );
  }
}

У цьому прикладі, _counter - це змінна стану, яка збільшується кожного разу, коли користувач натискає кнопку "Increase Counter". Функція setState викликається для інформування фреймворку Flutter про зміну стану, що змушує віджет перебудуватися з новим станом.

Stateful віджети є важливим інструментом у вашому арсеналі Flutter розробника, оскільки вони дозволяють вам створювати динамічні, інтерактивні інтерфейси користувача, що реагують на вхідні дані та взаємодію користувачів.

На противагу Stateless віджетам, Stateful віджети потребують більше уваги до деталей при управлінні станом, але вони надають більшу гнучкість і можливості для вашого додатка.

Inherited Віджети

Inherited віджети у Flutter використовуються для ефективного передавання даних вниз по дереву віджетів. Вони створюють спільний контекст, з якого віджети можуть читати дані.

Inherited віджети реалізують патерн проектування, який відомий як "Dependency injection", що забезпечує гнучкість і ефективність.

Використовуючи Inherited віджети, ви можете уникнути передачі даних в ручну через конструктори великого числа віджетів. Замість цього, ви можете просто отримати доступ до даних з контексту поточного віджета.

Ось приклад Inherited віджета:

class MyInheritedWidget extends InheritedWidget {
  final int myData;

  MyInheritedWidget({Widget child, this.myData}) : super(child: child);

  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) => true;

  static MyInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}

У цьому прикладі, MyInheritedWidget передає дані (myData) до своїх дочірніх віджетів. Ці дані можна потім отримати в будь-якому дочірньому віджеті, викликавши MyInheritedWidget.of(context).myData.

Inherited віджети є потужним інструментом для організації та управління даними в додатках Flutter. Вони дозволяють вам ефективно передавати дані через дерево віджетів і забезпечувати єдиний джерело інформації для стану додатку.

Підсумок

Розуміння різниці між цими трьома типами віджетів є важливим при вивченні Flutter, оскільки вони становлять основу, на якій ви будете будувати ваши додатки. У наступних статтях ми подивимося ближче на кожен із цих типів віджетів і розглянемо, як вони використовуються в практиці.

Я сподіваюсь, що це буде корисно! Якщо вам потрібна додаткова допомога або уточнення, не соромтеся питати.