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

Flutter – Scroll horizantal not working with ListView

The problem is in the user’s page in the scroll of the list view. I tried many solutions but no one is working.

This has been used on a scaffold’s body.
Users page the horizontal Scroll :

class UsersPage extends StatefulWidget {
  const UsersPage({super.key});

  @override
  State createState() => _UsersPageState();
}

class _UsersPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Expanded(
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 20,
                itemBuilder: (c, index) {
                  return const UserItemCircular();
                }),
          )
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    For horizontal listview, you need to provide a fixed height.

    SizedBox(
  height:  200,//your item height
  child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 20,
      itemBuilder: (c, index) {
        return const UserItemCircular();
      }),
)
    Login or Signup to reply.
  2. 0

    Horizontal ListViews require a fixed height, as they expand horizontally.

    Here is where you can make changes to your code. ✅

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Horizontal Scroll',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal Scroll Example'),
      ),
      body: Container(
        height: 300, // Adjust as needed for desired height
        child: Center(
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 20, // Modify the number of users as required
            itemBuilder: (context, index) {
              return UserItemCircular(
                  index); // Assuming UserItemCircular is a custom widget
            },
          ),
        ),
      ),
    );
  }

  Widget UserItemCircular(int num) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      width: 200,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(15),
      ),
      child: Center(
          child: Text(
        "$num",
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      )),
    );
  }
}

    The Result

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search