skeleton_loader icon indicating copy to clipboard operation
skeleton_loader copied to clipboard

How to handle overflowing?

Open Tutorialwork opened this issue 3 years ago • 2 comments

I want to show three items of my builder widget. On iPhone 13 mini is fine but on the iPhone SE the screen is to small to show all items and it overflows. Is there a way to ignore without having this error? When I reduce the amount it looks bad on bigger devices.

Bildschirmfoto 2022-03-09 um 20 35 30

Tutorialwork avatar Mar 09 '22 19:03 Tutorialwork

I can’t effectively recreate this without seeing the portion of your code that renders this.

but I think you can wrap the whole thing with a SingleChildScrollView. Doing that should fix the overflow issue..

lhamycodes avatar Mar 09 '22 19:03 lhamycodes

I have already tried SingleChildScrollView but it not works. Here is my whole widget.

import 'package:flutter/material.dart';
import 'package:skeleton_loader/skeleton_loader.dart';

class ExploreLoadingWidget extends StatelessWidget {
  const ExploreLoadingWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SkeletonLoader(
        builder: Padding(
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 0),
          child: Row(
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: Colors.red,
                ),
                height: 160,
                width: 150,
              ),
              const SizedBox(
                width: 10,
              ),
              Column(
                children: [
                  Row(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          color: Colors.red,
                        ),
                        height: 75,
                        width: 75,
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          color: Colors.red,
                        ),
                        height: 75,
                        width: 75,
                      ),
                    ],
                  ),
                  const SizedBox(height: 10,),
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.red,
                    ),
                    height: 75,
                    width: 150,
                  )
                ],
              )
            ],
          ),
        ),
        items: 2,
        highlightColor: Colors.grey,
        direction: SkeletonDirection.ltr);
  }
}

Tutorialwork avatar Mar 09 '22 20:03 Tutorialwork