2

I am trying to make UI of calculator based on my drawing,

here I have divided screen in two expanded container, top one for output and bottom one for buttons...

in bottom container I have taken grid view to show all buttons,

I want to fit all button's in bottom area without having scrolling effect of grid view.

in my code...grid view not showing last row...I have to scroll down to view it...

enter image description here here is my code

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(child: Container(color: Colors.orange,)),
            Expanded(
                child: GridView.builder(
                  itemCount: buttons.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4),
                    itemBuilder: (context, index) {
                      return ButtonWidget(color: Colors.grey,
                          ontap: () {},
                          caption: buttons[index].toString(),
                          textcolor: Colors.black);
                    })),
          ],
        ),
      ),
    );
  }

and here is button's class


class ButtonWidget extends StatelessWidget {
  final color;
  final textcolor;
  final String caption;
  final VoidCallback ontap;

  const ButtonWidget(
      {Key? key,
      required this.color,
      required this.ontap,
      required this.caption,
      required this.textcolor})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.grey[400],
          borderRadius: BorderRadius.circular(100),
        ),
        child: Center(
            child: Text(
          caption.toString(),
          style: GoogleFonts.actor(fontSize: 30,fontWeight: FontWeight.bold),
        )),
      ),
    );
  }
}
Irfan Ganatra
  • 967
  • 3
  • 13

1 Answers1

1

1.Remove your Expanded for GridView.

  1. Disable scrolling for GridView. Like this.

       GridView.builder(
    /// Add these two lines
     shrinkWrap: true,
     physics: const NeverScrollableScrollPhysics(),
     /// Your code,
    ),

Tip: If you don't wanna have small container on top, you can resize buttons' aspect ratio like this. But it will make buttons look a bit ugly.

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4,
///Add this, tweak the value as you wish
childAspectRatio: 1.3,
),

Have Fun!

Ye Lwin Oo
  • 466
  • 4
  • 8
  • can u rate it if question is rated kind... – Irfan Ganatra Nov 06 '22 at 18:10
  • How do you know that you have to give 1.3 childAspectRatio? – Balaji Nov 06 '22 at 20:52
  • Ahh, 1.3 is the sample answer. It may not work well on your screen. Bear with me as I'm too bored to calculate the aspect ratio :). If you wanna calculate it, here's the resource. https://stackoverflow.com/questions/62666204/how-to-calculate-childaspectratio-for-gridview-builder-in-flutter – Ye Lwin Oo Nov 06 '22 at 21:39