Flutter-如何调整GridView单元的大小

Question

I want to resize GridView cell (green area). Below is my code.

GridView.builder(
      controller: ScrollController(keepScrollOffset: true),
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          width: 200.0,
          height: 300.0,
          color: Colors.green,
          margin: EdgeInsets.all(10.0),
        );
      }, 
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
    );
  }

My objective is to make UI like below:

Answer 1

To recreate the app in the pictures, you probably want to take a look at the PageView widget.

Here is a sample app:

import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(child: PageView.builder(itemBuilder: _buildPage)),
      ),
    );
  }

  Widget _buildPage(BuildContext context, int index) {
    return Container(
      margin: EdgeInsets.all(50.0),
      color: Colors.green,
      child: Center(child: Text("$index")),
    );
  }
}