Как я могу просмотреть FloatingActionButton при условии

Question

У меня есть список заказов orderList.Если это пустой, FloatingActionButton это скрыть.В случае, если у orderList есть продукты - будет показан FAB.Мой код:

bool statusFAB = false;   

_getFABState(){
        setState(() {
          if(!orderList.isEmpty){
            statusFAB = true;
          }
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          floatingActionButton: _getFAB(),
          backgroundColor: _kAppBackgroundColor,
          body: Builder(
            builder: _buildBody,
          ),
        );

      Widget _getFAB() {
        if(statusFAB){
          return FloatingActionButton(
              backgroundColor: Colors.deepOrange[800],
              child: Icon(Icons.add_shopping_cart),
              onPressed: null);
        }
      }

Не работает, потому что условие работает один раз, но состояние orderList можно изменить в любое время.

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Product> orderList = List();
  int counter = 0;

  void getCount(){
    setState(() {
      counter = orderList.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Center(
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              IconButton(
                onPressed: (){
                  if(orderList.isNotEmpty)
                  orderList.removeLast();
                  getCount();
                },
                icon: Icon(Icons.remove),
                color: Colors.red,
              ),
              Text('$counter'),
              IconButton(
                onPressed: (){
                  orderList.add(Product('product'));
                  getCount();
                  print('product added');
                },
                icon: Icon(Icons.add),
                color: Colors.blue,
              )
            ],
          ),
        ),
      ),
      floatingActionButton: _getFAB()
    );
  }

 Widget _getFAB() {
   if (orderList.isEmpty) {
     return Container();
   } else {
     return FloatingActionButton(
         backgroundColor: Colors.deepOrange[800],
         child: Icon(Icons.shopping_cart),
         onPressed: null);
   }  }
}

class Product {
  String title;
  Product(this.title);
}

Answer 2

Что ж, есть ярлык, который можно использовать с троичным оператором и который можно использовать в Scaffold Stateful Widget как

floatingActionButton: orderList.isEmpty ? Container() : FloatingActionButton(...)

Если вам не нужна длинная и сложная функция, это прекрасно работает.Даже если вам нужна сложная функция, эта функция может быть вызвана только тогда, когда был необходим чертеж

floatingActionButton: orderList.isEmpty ? Container() : ComplicatedFn(...)

Widget ComplicatedFn() {
     //.... Complicated Algo
     return FloatingActionButton(...)
}

Answer 3

Вам не нужно хранить переменную statusFAB, вы можете просто оценить ее на лету.Смотрите обновленный образец ниже:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: _getFAB(),
      backgroundColor: _kAppBackgroundColor,
      body: Builder(
        builder: _buildBody,
      ),
    );

  Widget _getFAB() {
    if (orderList.isEmpty) {
      return Container();
    } else {
      return FloatingActionButton(
          backgroundColor: Colors.deepOrange[800],
          child: Icon(Icons.add_shopping_cart),
          onPressed: null);
    }
  }