Развернутый по центру ListView внутри Flutter Column

Question

Я пытаюсь построить макет, в котором есть два текстовых объекта сверху и снизу, которые остаются канцелярскими, и ListView в их центре.

Вот код для экрана

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 40.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  DateFormat("hh:mm 'PM ,'  MMMM d").format(DateTime.now()),
                  style: Theme.of(context).textTheme.title,
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 4,
                  itemBuilder: (BuildContext context, int index) =>
                      CustomAppText(
                        text: 'Custom App',
                      ),
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  "Settings",
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Вывод данного кода

Дизайн, который я ищу

Я пытался использоватьвиджет Center, но он не центрирует ListView

Answer 1

Надеюсь, это поможет.Дайте верхнему и нижнему виджетам 25% размера экрана.Дайте списку 50% размера экрана.

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    final _size = MediaQuery.of(context).size;

    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(28.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // Top Widgets
              Container(
                width: double.infinity,
                // color: Colors.green,
                height: _size.height * 0.25, // Take 25% width of the screen height
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('11: 25 AM', style: TextStyle(fontSize: 23.0),),
                    Text('Set As Launcher', style: TextStyle(fontSize: 23.0),)
                  ],
                ),
              ),

              Expanded(
                child: Container(
                  // color: Colors.yellow,
                  child: ListView(
                    children: List.generate(25, (index){
                      return Text('Custom App $index', style: TextStyle(fontSize: 45.0),);
                    }),
                  ),
                ),
              ),

              // Bottom Widgets
              Container(
                width: double.infinity,
                // color: Colors.blue,
                height: _size.height * 0.25, // Take 25% width of the screen height
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Settings', style: TextStyle(fontSize: 23.0),),                    
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

Просто добавьте Expanded в качестве оболочки для вашего первого Container внутри Column

        Expanded(
                        child: Container(
                          margin: EdgeInsets.symmetric(vertical: 40.0),
                          child: Text(
                            DateFormat("hh:mm 'PM ,'  MMMM d").format(DateTime.now()),
                            style: Theme.of(context).textTheme.title,
                          ),
                        ),
                      ),

Answer 3

ListView заполняет весь расширенный виджет, поэтому использование виджета «Центр» не сработало, поэтому необходимо добавить shrinkWrap: true, чтобы ListView занимал только высоту своих дочерних элементов.

После просмотра содержимогодокументация, которую я нашел о Flexible Widget

Flexible, which does not force the child to fill the available space.

Внес изменения и работает как брелок

Flexible(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: 4,
                  itemBuilder: (BuildContext context, int index) =>
                      CustomAppText(
                        text: 'Custom App',
                      ),
                ),
              ),

Answer 4

Если вы замените свой Expanded виджет на Container и дадите ему фиксированный height, я думаю, вы получите то, что ищете.