skip to Main Content

enter image description here

so im trying to make the names stay below even at different sizes of screen.
I can’t make the category names stay below. enter image description here

this is the source code so far

class CategoryItem extends StatelessWidget {
  final Category category;
  const CategoryItem({super.key, required this.category});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.only(top: 20),
      decoration: BoxDecoration(
        color: category.backColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), 
          topRight: Radius.circular(10)
        )
      ),
      child: Stack(
        children: [
          Image.asset(
            category.image,
            height: 80,
            width: 80,
            alignment: Alignment.topCenter,
          ),
          Container(
            padding: EdgeInsets.all(10),
            width: double.infinity,
            margin: EdgeInsets.only(top: 60),
            color: Colors.white,
            child: Text(category.title)
            )
        ]
      ),
    );
  }
}

2

Answers


  1. You can try wrapping your Container inside an Align Widget and set the alignment to bottomCenter

          Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        padding: EdgeInsets.all(10),
                        width: double.infinity,
                        margin: EdgeInsets.only(top: 60),
                        color: Colors.white,
                        child: Text(category.title)),
                  )
    
    Login or Signup to reply.
  2. just don’t use your Stack widget and change it into Column

    class CategoryItem extends StatelessWidget {
      final Category category;
      const CategoryItem({super.key, required this.category});
    
      @override
      Widget build(BuildContext context) {
        Size size = MediaQuery.of(context).size;
        return Container(
          padding: EdgeInsets.only(top: 20),
          decoration: BoxDecoration(
            color: category.backColor,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), 
              topRight: Radius.circular(10)
            )
          ),
          child: Column(
            children: [
              Image.asset(
                category.image,
                height: 80,
                width: 80,
                alignment: Alignment.topCenter,
              ),
              Container(
                padding: EdgeInsets.all(10),
                width: double.infinity,
                margin: EdgeInsets.only(top: 60),
                color: Colors.white,
                child: Text(category.title)
                )
            ]
          ),
        );
      }
    }
    
    

    and now your widget design should be work as you want

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search