Основні типи віджетів у 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, оскільки вони становлять основу, на якій ви будете будувати ваши додатки. У наступних статтях ми подивимося ближче на кожен із цих типів віджетів і розглянемо, як вони використовуються в практиці.

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

Поділись своїми ідеями в новій публікації.
Ми чекаємо саме на твій довгочит!
ІТ Дмитро
ІТ Дмитро@it.dmytro

Mobile Team Lead, блогер

1.2KПрочитань
2Автори
20Читачі
Підтримати
На Друкарні з 25 травня

Більше від автора

  • Memeinator. $MMTR Coin

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

    Теми цього довгочиту:

    Криптовалюта
  • My first pet project that reached the App Store

    VL Content Planner is the world’s first app for scheduling and automatic posts to TikTok.

    Теми цього довгочиту:

    Flutter
  • Контент-план як запорука успіху в TikTok

    "Планування контенту в TikTok для зростання аудиторії: використання VL Content Planner для стабільності публікацій та оптимізації вашого відео-контенту."

    Теми цього довгочиту:

    Тік Ток

Вам також сподобається

  • λanguage: Неформальний опис мови

    Автор пояснює, як написати парсер, інтерпретатор, компілятор, та інші складові власної мови програмування. Описується синтаксис мови, особливості реалізації функцій, умовних конструкцій та інших елементів мови.

    Теми цього довгочиту:

    Js
  • Чому я обрала React Native

    Після опублікування першого довгочиту, який я відкладала пару місяців, я зрозуміла, що треба підтримувати цей темп. Але одразу виникло питання: а що ж писати далі? Але потім подумала: можливо, саме мій погляд новачка і буде комусь корисним чи, принаймні, цікавим?

    Теми цього довгочиту:

    Мобільна Розробка
  • Сервіси, з якими я познайомилась під час створення мобільного застосунку

    Я ще не опублікувала свій застосунок, проте вже відкрила для себе кілька корисних сервісів. Ось короткий огляд платформ, про які я дізналась:

    Теми цього довгочиту:

    Добірка Сервісів

Коментарі (5)

Маю питання не дуже повязане з темою довгочита який стейт менеджмент ви використовуете?

Вам також сподобається

  • λanguage: Неформальний опис мови

    Автор пояснює, як написати парсер, інтерпретатор, компілятор, та інші складові власної мови програмування. Описується синтаксис мови, особливості реалізації функцій, умовних конструкцій та інших елементів мови.

    Теми цього довгочиту:

    Js
  • Чому я обрала React Native

    Після опублікування першого довгочиту, який я відкладала пару місяців, я зрозуміла, що треба підтримувати цей темп. Але одразу виникло питання: а що ж писати далі? Але потім подумала: можливо, саме мій погляд новачка і буде комусь корисним чи, принаймні, цікавим?

    Теми цього довгочиту:

    Мобільна Розробка
  • Сервіси, з якими я познайомилась під час створення мобільного застосунку

    Я ще не опублікувала свій застосунок, проте вже відкрила для себе кілька корисних сервісів. Ось короткий огляд платформ, про які я дізналась:

    Теми цього довгочиту:

    Добірка Сервісів