Scrolling in flutter

Question

For me, scrolling in flutter is not working, So I wrote a simple test code as below to show the problem, how can I make this content to scroll? Can someone help.

import 'package:flutter/material.dart';

class TestScreenExtends extends StatelessWidget {
  const TestScreenExtends({super.key});

  Widget getRow(int rowId, int count) {
    List<Widget> widgets = [];
    for (int i = 0; i < count; i++) {
      widgets.add(Text("rowitem ($rowId, $i) "));
    }
    return Row(
      children: widgets,
    );
  }

  Widget getRows(int count) {
    List<Widget> rows = [];
    for (int i = 0; i < count; i++) {
      rows.add(getRow(i, 20));
    }
    return Column(
      children: rows,
    );
  }

  @override
  Widget build(Object context) {
    return Material(
      child: getRows(50),
    );
  }
}

---

Edit-2 Problem can be demonstrated in even smaller code. Vertical listview has scrollbar, Horizontal view is not getting it.see below code

import 'package:flutter/material.dart';

class TestScreenExtends extends StatelessWidget {
  const TestScreenExtends({super.key});

  Widget getRow(int rowId, int count) {
    List<Widget> widgets = [];
    for (int i = 0; i < count; i++) {
      widgets.add(SizedBox(
          width: 80,
          child: Text(
            "item($rowId, $i)",
            softWrap: false,
          )));
    }
    return ListView(
      scrollDirection: Axis.horizontal,
      //scrollDirection: Axis.vertical,
      children: widgets,
    );
  }

  @override
  Widget build(Object context) {
    return Material(
      child: getRow(1, 50),
    );
  }
}

Answer 1

Wrap your widget in a SingleChildScrollView :

 SingleChildScrollView(
      child: getRows(50))

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

This is very beginner stuff that are explained in the flutter get started, you should really dig deeper and understand the fundamentals of Flutter, Widget and how the UI Is built otherwise you will face many issues and bug.

Flutter has an amazing documentation and tutorials, do use the Code Lab

Answer 2

use scroll for horizontal view

return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
       child:Column(
          children: rows,
         )
      );

use scroll for vertical view

return SingleChildScrollView(
          scrollDirection: Axis.vertical,
           child:Column(
              children: rows,
             )
          );

and u you can use separate scroll in all view

ingleChildScrollView(
              scrollDirection: Axis.vertical,// Axis.horizontal,
child: widget
)

Answer 3

First wrap your getRows(1000) with SingleChildScrollView for vertival overflow issue, then wrap your text with Expanded for horizontal overflow issue, like this:

class TestScreenExtends extends StatelessWidget {
  const TestScreenExtends({super.key});

  Widget getRow(int rowId, int count) {
    List<Widget> widgets = [];
    for (int i = 0; i < count; i++) {
      widgets.add(SizedBox(
          width: 80,
          child: Text(
            "item($rowId, $i)",
            softWrap: false,
          )));
    }
    return Row(
      children: widgets,
    );
  }

  Widget getRows(int count) {
    List<Widget> rows = [];
    for (int i = 0; i < count; i++) {
      rows.add(getRow(i, 10));
    }
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Column(
        children: rows,
      ),
    );
  }

  @override
  Widget build(Object context) {
    return Material(
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: getRows(100),
      ),
    );
  }
}