how to give width of image card in PageView widget in flutter

Question

I wanted to create pageview like in the following image: figma design

But all I had is like in the following image: my flutter pageview widget

Pageview is taking full width of viewport. How can I make my pageview like in the first image. My code is the following:

  Container(
                child: Directionality(
                  textDirection: TextDirection.rtl,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        width: 100,
                        child: PageView(
                          controller: controller,
                          children: imgList
                              .map((item) => Card(
                                    // semanticContainer: true,
                                    clipBehavior: Clip.antiAliasWithSaveLayer,
                                    shape: RoundedRectangleBorder(
                                        borderRadius:
                                            BorderRadius.circular(16)),
                                    child: Image.network(
                                      item,
                                      height: 150,
                                      width: 50,
                                      fit: BoxFit.fill,
                                    ),
                                  ))
                              .toList(),
                        ),
                      ),
                    ],
                  ),
                ),
              ) 

Answer 1

try to change the viewport by using pageviewcontroller:

  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(viewportFraction: 0.8);
  }