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

Flutter: Issue with Horizontal Overflow on List.View

I am trying to have a dynamic list of "completed" stars for an ElevatedButton. This button has some text at the top, an image, and then a "Star Banner" at the bottom (I have attached screenshot). When I have 5 stars on the width there is no overflow, but as soon as I add more (expl: 10) then it becomes overflowed.

Can you help me understand how I can get the star banner not overflow on the 10 count?

Thank you,
Richard

Screenshot of Simulator on iPhone

My code that is being called:

import 'package:app/justin/page_justin.dart';
import 'package:app/widgets/quiz/star_banner.dart';
import 'package:flutter/material.dart';

class QuizSelector extends StatelessWidget {
  final String name;
  final String imageFilenameAndPath;
  final int starsCount;
  final int starsCompleted;

  const QuizSelector({
    super.key,
    required this.name,
    required this.imageFilenameAndPath,
    required this.starsCount,
    required this.starsCompleted,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const JustinHomePage()),
        );
      },
      child: Column(
        children: [
          Text(name),
          Expanded(child: Image.asset(imageFilenameAndPath)),
          StarBanner(totalCount: starsCount, completedCount: starsCompleted),
        ],
      ),
    );
  }
}

import 'package:app/utils/r2l_colors.dart';
import 'package:flutter/material.dart';

class StarBanner extends StatelessWidget {
  final int totalCount;
  final int completedCount;

  const StarBanner({required this.totalCount, required this.completedCount});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(
        totalCount,
        (index) => Icon(
          index < completedCount ? Icons.star : Icons.star_border,
          color: R2lColors.yellow,
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I eventually solved the issue by using the following for my StarBanner class. like this:

    class StarBanner extends StatelessWidget {
  final int totalCount;
  final int completedCount;

  const StarBanner({super.key, required this.totalCount, required this.completedCount});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(
        totalCount,
        (index) => Flexible(
          child: FittedBox(
            fit: BoxFit.scaleDown,
            child: Icon(
              index < completedCount ? Icons.star : Icons.star_border,
              color: R2lColors.yellow,
            ),
          ),
        ),
      ),
    );
  }
}

    I hope this comes in handy for anybody facing the same problem.

    Thanks, Richard


  2. 0

    The possible way that I know is to use SingleChildScrollView to fix overflow:

    SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: List.generate(
                      10,
                          (index) => const Icon(Icons.star, color: Colors.white,size: 20,),
                    ),
                  ),
                ),

    Demo

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

Back To Top
Search