Как правильно разместить виджет относительно другого виджета во Флаттере

Question

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

Я мог бы получить кнопки внизу слева и внизу справа, но тексты просто накладываются друг на друга при использовании Stack ().

Это то, что я мог бы прийти с

Вот мой код функции сборки

@override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Text(
                'Press the button'
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Text(
                '$_counter'
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: FloatingActionButton(
              onPressed: _decrementCounter,
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          )
        ],
      )
      // Center is a layout widget. It takes a single child and positions it
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 1

Вы должны использовать Column для достижения этой цели. Я положил оба Text в него.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('title')),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Press the button'),
                Text('1'),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: FloatingActionButton(
              onPressed: null,
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
              onPressed: null,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          )
        ],
      ),
    );
  }