Scrolling in flutter

userJFvo 0
Viewed 51

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),
    );
  }
}

Scrolling does not appear

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),
    );
  }
}
flutter-scrollbar flutter-layout flutter
3 Answers

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),
      ),
    );
  }
}

enter image description here

eamirho3ein0

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

Gaëtan GR0

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
)
userohhJ0
Related