Как добавить заголовок поверх ListView во Flutter?

Question

У меня есть представление списка, которое прокручивается внутри контейнера и имеет 7 плиток. Я хочу добавить заголовок «Настройки» поверх списка, который должен оставаться там даже при прокрутке списка.

Когда я добавил его в список прокручивал но за заголовком. Это очень затрудняло чтение элементов списка. Есть ли лучший способ добавить этот заголовок?

Это мой код для listView внутри контейнера с закругленными краями:

  Padding(
            padding: const EdgeInsets.only(top: 408.0, left: 8, right: 8),
            child: Container(
              width: double.infinity,
              height: 590,
              margin: EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(34)),
              ),
              child: Stack(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 12.0, top: 10),
                    child: ListView.builder(
                      primary: false,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: 7,
                      itemBuilder: (BuildContext context, int index) {
                        IconData icon;

                        if (index == 0) {
                          icon = Entypo.phone;
                        } else if (index == 1) {
                          icon = Entypo.help;
                        } else if (index == 2) {
                          icon = Entypo.email;
                        } else if (index == 3) {
                          icon = Entypo.star;
                        } else if (index == 4) {
                          icon = Entypo.share;
                        } else if (index == 5) {
                          icon = Entypo.info;
                        } else if (index == 6) {
                          icon = Entypo.log_out;
                        } else if (index == 7) {
                          icon = Entypo.log_out;
                        }

                        return new GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () => {_onTileClicked(index)},
                          child: SettingsCard(
                            title: settingsAry[index]['title'],
                            description: settingsAry[index]['description'],
                            index: index,
                            iconData: icon,
                          ),
                        );
                      },
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 10.0, left: 20),
                        child: Text(
                          'Settings',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 23),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
          )

Answer 1

Вам необходимо поместить их в столбец: сначала заголовок, затем Expanded с ListView в качестве дочернего элемента. Это должно сделать это:

  Padding(
            padding: const EdgeInsets.only(top: 408.0, left: 8, right: 8),
            child: Container(
              width: double.infinity,
              height: 590,
              margin: EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(34)),
              ),
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 10.0, left: 20),
                        child: Text(
                          'Settings',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 23),
                        ),
                      )
                    ],
                  )
                  Expanded(
                    child: ListView.builder(
                      primary: false,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: 7,
                      itemBuilder: (BuildContext context, int index) {
                        IconData icon;

                        if (index == 0) {
                          icon = Entypo.phone;
                        } else if (index == 1) {
                          icon = Entypo.help;
                        } else if (index == 2) {
                          icon = Entypo.email;
                        } else if (index == 3) {
                          icon = Entypo.star;
                        } else if (index == 4) {
                          icon = Entypo.share;
                        } else if (index == 5) {
                          icon = Entypo.info;
                        } else if (index == 6) {
                          icon = Entypo.log_out;
                        } else if (index == 7) {
                          icon = Entypo.log_out;
                        }

                        return new GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () => {_onTileClicked(index)},
                          child: SettingsCard(
                            title: settingsAry[index]['title'],
                            description: settingsAry[index]['description'],
                            index: index,
                            iconData: icon,
                          ),
                        );
                      },
                    ),
                  ),

                ],
              ),
            ),
          )

Я заменил ваш Padding на Expanded, потому что это было легче сделать. Вы можете оставить Padding внутри Expanded, если хотите.