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

Метод 1: встроенный FutureBuilder и RaishedButton

FutureBuilder(
  future: yourFuture,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return RaisedButton(
        onPressed: () {
          // Handle button press
        },
        child: Text('Press Me'),
      );
    }
  },
)

Метод 2: FutureBuilder и ElevatedButton

ElevatedButton(
  onPressed: () {
    // Handle button press
  },
  child: FutureBuilder(
    future: yourFuture,
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      } else {
        return Text('Press Me');
      }
    },
  ),
)

Метод 3: собственный виджет кнопки с помощью FutureBuilder

class CustomButton extends StatelessWidget {
  final Future yourFuture;
  final Function onPressed;
  CustomButton({this.yourFuture, this.onPressed});
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: yourFuture,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return RaisedButton(
            onPressed: onPressed,
            child: Text('Press Me'),
          );
        }
      },
    );
  }
}
// Usage:
CustomButton(
  yourFuture: yourFuture,
  onPressed: () {
    // Handle button press
  },
)

Метод 4. Использование StatefulWidget с FutureBuilder

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  Future yourFuture;
  @override
  void initState() {
    super.initState();
    yourFuture = fetchData(); // Replace with your async operation
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FutureBuilder(
          future: yourFuture,
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Container(
                child: Text('Data loaded successfully!'),
              );
            }
          },
        ),
        RaisedButton(
          onPressed: () {
            // Handle button press
          },
          child: Text('Press Me'),
        ),
      ],
    );
  }
}
// Usage:
MyWidget()

В этой статье мы рассмотрели несколько методов реализации FutureBuilder и Button во Flutter. Независимо от того, решите ли вы использовать встроенный подход, комбинировать виджеты, создавать собственные виджеты или использовать StatefulWidget, каждый метод позволяет вам обрабатывать асинхронные операции и эффективно реагировать на взаимодействия с пользователем. Поэкспериментируйте с этими примерами кода и выберите подход, который лучше всего соответствует вашим потребностям в разработке Flutter.