Как мы можем отображать информацию в верхней панели во флаттере?

Question

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

Answer 1

Во-первых, во Flutter все, что появляется на экране, это Widget.

Так что обычно вы делаете что-то подобное для AppBar:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
    );
  }
}

Но если Вы проверяете код AppBar. Вы увидите, что title определен как Widget. Так что, пока вы предоставляете Widget в title, он будет отображаться.

Если вы хотите отобразить в заголовке более одного текста, вы можете использовать Column s или Row s, которые Widget s сами.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int balance = 1000;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Title'),
            Text('Balance: \$$balance', style: Theme.of(context).textTheme.subtitle,)
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          setState(() {
            balance += 100;
          });
        },
      ),
    );
  }
}