Как развернуть столбец в виде списка, чтобы покрыть все оставшееся пространство экрана в панели навигации

#dart #flutter

#dart #flutter

Вопрос:

Я создаю навигацию Drawer в flutter, с некоторыми элементами сверху, а некоторые элементы внизу панели. Но в ListView , я не могу добавить Column виджет в нижней части Drawer . Я даже пытался расширить, но это не решило проблему.

 Drawer(
      child: ListView(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
            padding: const EdgeInsets.only(bottom: 10),
            child: Stack(
              alignment: Alignment.topRight,
              children: <Widget>[
                Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(height: 30),
                      CircleAvatar(
                        radius: 45,
                        child: Text(
                          'AC',
                          style: TextStyle(fontSize: 40),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Divider(),
          Column(children: _drawerOptions),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text(
                  AppStrings.termsAndConditions,
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Color.fromARGB(255, 39, 39, 39),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  

Этот последний виджет Column , обернутый Expanded , должен был поместить его Column внизу Drawer , но этого не происходит.

Кто-нибудь может предложить какое-либо решение?

Ответ №1:

Вы должны сделать это другим способом, вставив ListView inside Column using Expanded , вот полный рабочий код.

 Drawer(
  child: Column(
    children: <Widget>[
      Container(
        margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
        padding: const EdgeInsets.only(bottom: 10),
        child: Stack(
          alignment: Alignment.topRight,
          children: <Widget>[
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 30),
                  CircleAvatar(
                    radius: 45,
                    child: Text(
                      'AC',
                      style: TextStyle(fontSize: 40),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      Divider(),
      Expanded(child: ListView(children: _drawerOptions)),
      Spacer(),
      Text("Terms and conditions"),
    ],
  ),
),