Responsive Numeric Grid

[NoobTheOofy Oof]

Hello

I am new in flutter and i am trying to create a responsive numeric keypad to take amount input from the user. It looks great when device is in Portrait but not in landscape mode. Below are the screenshots for both:

Below is code for my Gridview :

@override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      padding: const EdgeInsets.all(10),
      itemCount: NUMERIC_BUTTONS.length,
      itemBuilder: (ctx, i) {
        return NumericItem(
          NUMERIC_BUTTONS[i],
          _updateTextbox,
        );
      },
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: 3 / 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
    );
  }

And here is for numeric item widget:

    @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      onPressed: () {
        _doOperation(widget.operation);
      },
      elevation: 2.0,
      fillColor: theme.hexButtonColor,
      child: widget.operation == "BS"
          ? Icon(
              Icons.backspace,
              color: theme.hexButtonTextColor,
            )
          : Text(
              widget.operation,
              style: TextStyle(
                color: theme.hexButtonTextColor,
                fontSize: 30,
              ),
            ),
      padding: EdgeInsets.all(15.0),
      shape: CircleBorder(),
    );
  }

Can you please guide me how i can make this grid to responsive or may be like something these :

--

SHAHZAD AHMED KHAN

[Graham Dickinson]

Maybe check out this article on responsive layout: https://medium.com/flutter-community/developing-for-multiple-screen-sizes-and-orientations-in-flutter-fragments-in-flutter-a4c51b849434

Krgrds, Graham

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CAB2YkbrmP2ysuQ1sWhW_g-w32h0TYXd-v5jkmdbrXomWPoRikA%40mail.gmail.com.