How to create List inside the specific area of screen in flutter

Question

I am new to Flutter development and I am having trouble creating a scrollable list within the header and footer area of the screen. The header and footer data will be fixed, while the list will be scrollable. I have included a sample image of the design I am trying to achieve:

The screen title will be fixed, followed by Text 1, 2, 3 and 4 on top of the screen. After that there will be a scrollable list which can contain any number of data. Finally, there is a footer area for some text that will also be fixed at the bottom of the screen.

Thanks in advance.

Answer 1

you can refer to the below code for the given design:

import 'package:flutter/material.dart';

class ScreenDesign extends StatefulWidget {
  const ScreenDesign({Key? key}) : super(key: key);

  @override
  State<ScreenDesign> createState() => _ScreenDesignState();
}

class _ScreenDesignState extends State<ScreenDesign> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Tittle',
        ),
      ),
      body: Column(children: [
        _headerWidgets(),
        _listViewWidget([
          'List Item 1',
          'List Item 2',
          'List Item 3',
          'List Item 4',
          'List Item 5',
          'List Item 6',
          'List Item 7',
          'List Item 8',
          'List Item 9',
          'List Item 10',
          'List Item 11',
          'List Item 12',
          'List Item 13',
          'List Item 14',
          'List Item 15',
        ]),
        _footerWidgets()
      ]),
    );
  }

  Widget _headerWidgets() {
    return const Expanded(
      child: Column(
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('Text 1'),
                Text('Text 2'),
              ],
            ),
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('Text 3'),
                Text('Text 4'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _listViewWidget(List<String> dataList) {
    return Expanded(
      flex: 6,
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: dataList.length,
          itemBuilder: (context, index) => ListTile(
                title: Text(dataList[index]),
              )),
    );
  }

  Widget _footerWidgets() {
    return const Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text('Text 5'),
          Text('Text 6'),
          Text('Text 7'),
        ],
      ),
    );
  }
}

Here if you want to change the size of header, footer or listView you can add flex in the expanded widget as i have given to expended widget wrapping the listView.

And if you want the footer to stay in the bottom of the screen and listView data to go behind the footer then you just need to return the _footerWidgets from the scaffold property called bottomSheet.