skip to Main Content

I am trying to change the default position of listView items as it is starting below AppBar But I want it to start with AppBar. Here is the code for ListView That I am using

ListView(
  children: [
    Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
          image: DecorationImage(
        image: AssetImage(
          'assets/images/backgroundHome.png',
        ),
        fit: BoxFit.fill,
        colorFilter:
            ColorFilter.mode(Colors.black45, BlendMode.difference),
      )),
      child: Align(
          alignment: Alignment.centerLeft,
          child: RichText(
            text: const TextSpan(
                style: TextStyle(
                    fontFamily: "Inter",
                    fontSize: 40,
                    fontWeight: FontWeight.bold),
                children: [
                  WidgetSpan(
                      child: Padding(
                    padding: EdgeInsets.only(left: 60),
                    child: Text("Where Dreams Take Flight:",
                        style: TextStyle(
                            fontFamily: "Inter",
                            color: Colors.white,
                            fontSize: 50,
                            fontWeight: FontWeight.bold)),
                  )),
                  WidgetSpan(
                      child: Padding(
                    padding: EdgeInsets.only(left: 50),
                    child: Text("Explore the globe with Travel Eyes",
                        style: TextStyle(
                            fontFamily: "Inter",
                            color: Colors.white,
                            fontSize: 50,
                            fontWeight: FontWeight.bold)),
                  ))
                ]),
          )),
    ),
    Container(
      color: Colors.orange,
      height: 100,
    )
  ],
),
  • The Result I am getting

The Result I am getting

  • The Result I want

The Result I want

2

Answers


  1. You can wrap the ListView inside a Column and place the AppBar widget above the ListView.

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: Column(
              children: [
                AppBar(
                  title: Text('Your Title'),
                  elevation:0,
                 
                ),
                Expanded(
                  child: ListView(
                    children: [
                      Container(
                        height: MediaQuery.of(context).size.height,
                        width: MediaQuery.of(context).size.width,
                        decoration: const BoxDecoration(
                          image: DecorationImage(
                            image: NetworkImage(
                              'https://th.bing.com/th/id/OIP.GPgOs_sd9nF8fsKDOJe9dQHaEo?w=278&h=180&c=7&r=0&o=5&pid=1.7',
                            ),
                            fit: BoxFit.fill,
                            colorFilter: ColorFilter.mode(
                              Colors.black45,
                              BlendMode.difference,
                            ),
                          ),
                        ),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: RichText(
                            text: const TextSpan(
                              style: TextStyle(
                                fontFamily: "Inter",
                                fontSize: 40,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                              ),
                              children: [
                                WidgetSpan(
                                  child: Padding(
                                    padding: EdgeInsets.only(left: 60),
                                    child: Text(
                                      "Where Dreams Take Flight:",
                                      style: TextStyle(
                                        fontSize: 50,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                                WidgetSpan(
                                  child: Padding(
                                    padding: EdgeInsets.only(left: 50),
                                    child: Text(
                                      "Explore the globe with Travel Eyes",
                                      style: TextStyle(
                                        fontSize: 50,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.orange,
                        height: 100,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    Result:

    enter image description here

    Login or Signup to reply.
  2. You can wrap your ListView with Scaffold, and then put this property,

    extendBodyBehindAppBar: true

    Scaffold(
        extendBodyBehindAppBar: true,
        body: ListView(..)
    )
    

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search