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

Метод 1: setState()
Метод setState() является фундаментальной частью модели реактивного программирования Flutter. Это позволяет вам обновлять состояние виджета и запускать перестройку пользовательского интерфейса. Вот пример:

import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Counter:', style: TextStyle(fontSize: 20)),
            Text('$_counter', style: TextStyle(fontSize: 40)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

Метод 2: Navigator
Класс Navigator во Flutter обеспечивает навигацию между различными экранами или маршрутами внутри приложения. Вот пример перехода на новый экран:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

Метод 3: ListView.builder()
ListView.builder() — удобный метод для динамического создания списков переменной длины. Он эффективно создает только те элементы, которые видны на экране, что делает его идеальным для больших списков. Вот пример:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
);

Метод 4: FutureBuilder
Виджет FutureBuilder упрощает работу с асинхронными операциями, предоставляя элегантный способ обработки состояний загрузки, ошибок и успеха. Вот пример:

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Data: ${snapshot.data}');
    }
  },
);

В этой статье мы рассмотрели несколько основных методов Flutter, сопровождаемых примерами кода. Эти методы, такие как setState(), Navigator, ListView.builder() и FutureBuilder, демонстрируют мощь и универсальность Flutter для создания кроссплатформенных мобильных приложений. Используя эти методы, разработчики могут создавать многофункциональные интерактивные пользовательские интерфейсы, эффективно управляя состоянием и асинхронными операциями.