Is it possible to create a widget that is larger and taller than the screen on devices on Flutter?

MpDev
November 29, 2023
295 views
0 votes
2 Answers

I’m constructing a widget to incorporate a 20 X 20 board. The intention is to make the board scrollable both vertically and horizontally, including diagonal scrolling. Currently, I’m utilizing GridView.builder() with scrollDirection: Axis.horizontal, but the board isn’t scrollable vertically.

How can I effectively create a board larger than the screen and enable both vertical and horizontal scrolling?

Here’s a screenshot of the current board for reference: https://prnt.sc/saM42rNpDiII

Tags: dart flutter

Answers

I think what you are looking for is the InteractiveViewer

class InteractiveViewerExample extends StatelessWidget {
  const InteractiveViewerExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(20.0),
        minScale: 0.1,
        maxScale: 1.6,
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.orange, Colors.red],
              stops: <double>[0.0, 1.0],
            ),
          ),
        ),
      ),
    );
  }
}

This InteractiveViewer widget may solve your case.

 class MyBoard extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: InteractiveViewer(
            boundaryMargin: EdgeInsets.all(20.0),
            minScale: 0.1,
            maxScale: 1.6,
            child: Container(
              width: 20 * tileSize, //calculate the size based on your board size
              height: 20 * tileSize,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
              ),
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 20,
                ),
                itemBuilder: (context, index) {
                  // Build your grid items here
                  return Container(
                    color: Colors.blue, // Customize as needed
                  );
                },
              ),
            ),
          ),
        );
      }
    
      // Adjust the tileSize based on your needs
      static const double tileSize = 40.0;
    }

or use this page 
check this video too:

https://pub.dev/packages/widget_zoom
https://github-production-user-asset-6210df.s3.amazonaws.com/58891556/274191760-3f1641d7-3408-4641-8776-0ca842e1d1d7.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20231129%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231129T073620Z&X-Amz-Expires=300&X-Amz-Signature=6ba3116dbb606cc070d21fa2fb149c3996801adf084d882685ba6aa5054d02d2&X-Amz-SignedHeaders=host&actor_id=42842462&key_id=0&repo_id=394961509