CODEWITHSUNDEEP
flutterdartflutter-layoutmaterial-design
Alexandre Carneiro da Silva
Alexandre Carneiro da Silva

Reputation: 69

ListView goes up and down when i scroll it - flutter

I made a listview on flutter but it goes up and down when I scroll it

things I already tried:

https://drive.google.com/file/d/1OwFkEd-zqk5z5wF1eBUsjlpSWmbql3vZ/view?usp=sharing

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  final List<String> exercises;
  const HomePage({Key? key, required this.exercises}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
            const Text(
              'Fisioterapia rj',
              style: TextStyle(
                fontSize: 42
              ),
            ),              
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(top: 20, bottom: 20, right: 30, left: 30),
                child: ListView.builder(
                  shrinkWrap: false,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      color: Colors.black,
                      child: ListTile(
                        title: Text(
                          widget.exercises[index],
                          style: const TextStyle(
                            color: Colors.white,
                          ),
                        ),
                      ),
                    );
                  },
                  itemCount: widget.exercises.length,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 2

Views: 1291

Answers (3)

Saurab Ghimire
Saurab Ghimire

Reputation: 61

The ListView.builder widget has a default padding due to which it scrolls. You need to set the default padding to zero to disable such scrolling effect as follows:

padding: EdgeInsets.zero

So the listview builder code becomes as show below:

ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: false,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.black,
                  child: ListTile(
                    title: Text(
                      widget.exercises[index],
                      style: const TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                );
              },
              itemCount: widget.exercises.length,
   ),

Upvotes: 0

Kaushik Chandru
Kaushik Chandru

Reputation: 17762

To change the axis of scroll use

scrollDirection: Axis.horizontal,

Edit To keep the background without scrolling use the layout as below

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height:MediaQuery.of(context).size.height,
      width:MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage("https://dummyimage.com/600x400/000/fff"),
          fit:BoxFit.cover
        )
      ),
      child: ListView.builder(
        itemCount: 40,
        itemBuilder: (context, index){
          return Container(
            child: Text("This item has an index of $index", style:TextStyle(color:Colors.red)),
          );
        }
      ),
    );
  }
}

Upvotes: 2

sosnus
sosnus

Reputation: 1338

You do not show code, but I guess, You use kind a scrollview. You can try add parameter: physics = NeverScrollableScrollPhysics(), to ListView widget.

Upvotes: 0

Related Questions