CODEWITHSUNDEEP
androidflutterdartcross-platform
Aman Ojha
Aman Ojha

Reputation: 27

Flutter - Making Scrollable child inside a Column with List view Builder

I'm building a Calculator App in which I wanted a Scrollable Child for the previous Calculations, but as I've already used Column for listing the different Widgets It's Showing me hassize kind of Error.

Below is the Image for a portion of the Design with the area selected which I want to be Scrollable

enter image description here

Here is the Code which I Wrote for the View ( Page )

SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        ThemeSwitcher(height: height),
        Padding(
          padding: EdgeInsets.only(top: height * 0.15, right: width * 0.03),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
// From here I want the Widget to be Scollable based on the List declared before
              Container(
                child: SingleChildScrollView(
                  child: Column(children: [
                    ListView.builder(
                      itemBuilder: (context, index) => Text(
                        textEval[index],
                        style: TextStyle(
                          fontSize: (width * 0.045),
                          fontWeight: FontWeight.w500,
                          height: 2,
                        ),
                      ),
                    )
                  ]),
                ),
              ),
// The Elements between these two comments I want to be in a scrollable child view
              Text(
                textEval[textEval.length - 2],
                style: TextStyle(
                  fontSize: (width * 0.045),
                  fontWeight: FontWeight.w500,
                  height: 2,
                ),
              ),
              Text(
                mainText,
                style: TextStyle(
                  fontSize: (width * 0.08),
                  fontWeight: FontWeight.w500,
                  height: 2,
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),

Can anyone Tell me how to achieve this??

Upvotes: 1

Views: 1216

Answers (4)

Abdurakhmon Dedamirzaev
Abdurakhmon Dedamirzaev

Reputation: 17

Just wrap ListView.builder with SizedBox and set height and width

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63799

You can simplify the structure by removing extra widgets like Column.

Wrap SingleChildScrollView with Expanded to get available space for scrollabe child.

While SingleChildScrollView already handling scroll event ListView.builder scroll event will overlap and cause issue. You can use shrinkWrap: true, primary: false, or physics: const NeverScrollableScrollPhysics(),shrinkWrap: true, to solve this issue.

Demo Snippet

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: [
            // From here I want the Widget to be Scollable based on the List declared before
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  // mainAxisSize: MainAxisSize.min,
                  children: [
                    ListView.builder(
                      itemCount: 53,
                      shrinkWrap: true,
                      primary: false,
                      // physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) => Text(
                        "    textEval[index] $index",
                        style: const TextStyle(
                          fontWeight: FontWeight.w500,
                          height: 2,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // The Elements between these two comments I want to be in a scrollable child view
            const Text(
              "textEval[textEval.length - 2]",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                height: 2,
              ),
            ),
            const Text(
              "mainText",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                height: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }

Upvotes: 1

Sanketh B. K
Sanketh B. K

Reputation: 837

This is a common pattern in Flutter.You might have already tried

Column(
    children: [
        ...,
        SingleChildScrollView(
            child: Column()   // 2nd column
        )
    ]
)

It will not work because SingleChildScrollView can take infinite height and Column can allow infinite height.

The easiest way to get away with this is to wrap SingleChildScrollVIew with Expanded widget

Column(
    children: [
        ...,
        Expanded(
             child: SingleChildScrollView(
                   child: Column()   // 2nd column
             )
        )
    ]
)

This will make SingleChildScrollView to take the remaining height in Column. But if you want it to be the height of specific value, then replace Expanded with a Sizedbox of specified height.

Upvotes: 2

Zeshan Ul Haque
Zeshan Ul Haque

Reputation: 74

Wrap the Column with the SingleChildScrollView().

Upvotes: 0

Related Questions