How can i force the first item in listview to be hidden-CodePudding

i have listView contains many items like following

  Scaffold(
    backgroundColor:Colors.blue
    appbar:AppBar()
    body: ListView(
        children: <Widget>[    
          Text('hello'),    
          Divider(height: 2, color: Colors.black,),    
          Text('hello'),  
          Divider(height: 2, color: Colors.black,),    
          Text('hello'),  
          Divider(height: 2, color: Colors.black,),    
          Text('hello'),,   
        ],
      ),
     )

Now i need to hide the first index or make it not visible or being under appbar or top of screen that not be shown until if user scroll down such as normal scrolling ..

i tried the following but it will not show again if user scroll down . i covered it by Stack and tricked it with container the same Scaffold color

  Stack(
      children[
       Text('hello'),  
       Container(
        color:Colors.blue
       )
      ]
     )

i know it is not good way at all . because it will be hidden forever

How can i handle it , thanks

CodePudding user response：

to achieve this , if you want hind first element under the app bar . please check my code


 var itemCount = 31; // change this value to view different result
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('hi'),
        ),
        body: SingleChildScrollView(
            child: Stack(children: [
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          ),
          Positioned(
              top: itemCount <= 20 ? -15 : null,
              right: 0,
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: ListView.builder(
                 padding: EdgeInsets.only(bottom: 70),
                  controller: ScrollController(
                      initialScrollOffset: itemCount < 31 ? itemCount   1 : 31),
                  shrinkWrap: true,
                  itemCount: itemCount,
                  itemBuilder: (BuildContext context, int index) {
                    return Column(
                      children: [
                        Container(child: Text('hello $index')),
                        Divider(
                          height: 2,
                          color: Colors.black,
                        ),
                        Text(''),
                      ],
                    );
                  },
                ),
              ))
        ])));

it will work , please change the var itemCount = 31 ; value to view the result

use flutter_screenutil plugin . so it will adaptive for all screen size

Note That

my device display height: 756.0
my device display width : 360.0
my device display aspectRatio : 0.47619047619047616

so my ScrollOffset should be 31 , so i am use this value