How to make my text scrollable with along with listview.builder in flutter

Question

So , I have 2 functions. One is for displaying some text at the top and the other is the listview.builder. My listview.builder is scrollable, but I want to make my text also scrollable which is located above the listview.builder. Because when I scroll , I can only scroll the listview.builder. So when I scroll the listview.builder, my text should also automatically scroll

my body, where I call those functions:

return Scaffold(
        appBar: header(context, apptitle: true),
        backgroundColor: Color(0xff66FF99),
        body: ListView(children: [
          displaytitle(), \\ my function1
          SizedBox(
            height: 500,
            child: showpics(), \\ my second function
          ),
        ]));

my displaytitle() function:

displaytitle() {
    return Column(children: [
      SizedBox(
        height: 30.0,
      ),
      Text(
        "General Contest",
        style: TextStyle(
          fontFamily: "Montesserat",
          fontSize: 20.0,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.w700,
        ),
      ),
      SizedBox(height: 30.0),
      Container(
        width: MediaQuery.of(context).size.width / 2,
        height: 40.0,
        child: Material(
          borderRadius: BorderRadius.circular(100.0),
          //shadowColor: Color(0xff859DEF),
          color: Color(0xff4AA0F0),
          elevation: 10.0,

my show pics function where I have my listview.builder

return FutureBuilder(
        future: Future.wait([getposts(), getposts2()]),
        builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
          if (!snapshot.hasData) {
            return  Text(
              "Loading...",
              )
          }
          return ListView.builder(
              itemCount: snapshot.data[0].length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  child: Card(
                    elevation: 20.0,
                    child: Column(children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          CircleAvatar(
                            radius: 20.0,
                            backgroundImage:
                                NetworkImage(snapshot.data[0][index].picture),
                          ),

So my problem, is that I can only scroll my listview.builder and not my text above it. I cant add the text to listview.builder, because it will screw up my structure.

Solution

Add ClampingScrollPhysics() to listviewbuilder

ListView.builder(
  physics: ClampingScrollPhysics(),
  itemCount: 1,
  itemBuilder: (BuildContext context, int index) {
  return ;
 },
),

eg

ListView(
        children: [
          Column(
            children: [
              SizedBox(
                height: 30.0,
              ),
              Text(
                "General Contest",
                style: TextStyle(
                  fontFamily: "Montesserat",
                  fontSize: 20.0,
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.w700,
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width / 2,
                height: 40.0,
                child: Material(
                  borderRadius: BorderRadius.circular(100.0),
                  //shadowColor: Color(0xff859DEF),
                  color: Color(0xff4AA0F0),
                  elevation: 10.0,
                ),
              ),
            ],
          ),
          ListView.builder(
            physics: ClampingScrollPhysics(),
            shrinkWrap: true,
            itemCount: 30,
            itemBuilder: (context, index) => GestureDetector(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 50,
                  width: double.infinity,
                  color: Colors.yellow,
                ),
              ),
            ),
          ),
        ],
      ),

Comments

[Lalli Garden]

did not work, because it just apllys for my listview.builder and not for my displaytitle()

[Mr Random]

If you want to scroll the text widget along with the listview builder then the above snippet works (tested).