Question 187498 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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:

enter image description here

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.

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Try below code hope its help to you.
    Refer Widgets someI have used in below code – Expanded, Column, Row, basics widgets

    class ListPage extends StatelessWidget {
  const ListPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List dataList = [
      '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',
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen Title'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.yellow.shade300,
              child: const 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'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: dataList.length,
              itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        border: Border.all(color: Colors.black)),
                    child: ListTile(
                      title: Text(
                        dataList[index],
                        textAlign: TextAlign.center,
                      ),
                    ),
                  )),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.orange.shade300,
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text('Text 5'),
                  Text('Text 6'),
                  Text('Text 7'),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

    Result Screen-> image

    Login or Signup to reply.
  3. 0

    You can try this solution
    its basic but you can customize it the way you want

    import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Title"),
        backgroundColor: Colors.blueAccent,
        toolbarHeight: MediaQuery.of(context).size.height * .075,
      ),
      body: Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * .2,
            decoration: BoxDecoration(color: Colors.amber),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("Text1"),
                    Text("Text2"),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("Text3"),
                    Text("Text4"),
                  ],
                ),
              ],
            ),
          ),
          Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height * .475,
              decoration: BoxDecoration(color: Colors.grey),
              child: ListView.builder(
                  itemCount: 10,
                  physics: const ClampingScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) {
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const SizedBox(
                          height: 15,
                        ),
                        Center(
                            child: Container(
                          width: MediaQuery.of(context).size.width * .75,
                          height: 70,
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.black,
                              width: 1,
                            ),
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text(
                            "List view item ${index + 1}",
                            style: TextStyle(
                              fontSize: 20,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        )),
                        const SizedBox(
                          height: 15,
                        ),
                      ],
                    );
                  })),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * .15,
            decoration: BoxDecoration(color: Colors.amber),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text("Text1"),
                Text("Text2"),
                Text("Text3"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search