Flutter :- PageView Image 内部没有设置为适合屏幕的宽度？答案

【问题标题】：Flutter :- Inside the PageView Image is not setting to fit the screen on width?Flutter :- PageView Image 内部没有设置为适合屏幕的宽度？
【发布时间】：2020-01-21 11:55:23
【问题描述】：

我将PageView 用于查看寻呼机功能，并在每个页面上显示图像，每个页面上都包含一些文本和按钮。当我使用Stack 小部件将视图放在彼此上，例如Android 中的Relative-layout，但PageView 第一页上的我的图像未设置为适合屏幕我尝试了以下解决方案，如下所示
1).First link
2). Second Link
但没有得到正确的解决方案，我已经尝试了下面的代码行，

class MyTutorialScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      child: PageIndicatorContainer(
        pageView: PageView(
          children: <Widget>[
            Stack(
      //////ON THIS SECTION I AM GETTIG PROBLEM
              children: <Widget>[
                Container(
      /////// NEED THE SOLUTION ON THIS SECTION 
                  color: Colors.yellow,
                  child: Image.asset('images/walkthrough_1.png',
                      fit: BoxFit.fitWidth),
                ),
                Positioned(
                    top: 40.0,
                    right: 40.0,
                    child: InkWell(
                      onTap: () {
                        print("HERE IS I AM");
                      },
                      child: Text(
                        "SKIP",
                        style: TextStyle(color: Colors.white),
                      ),
                    )),
                Positioned(
                  bottom: 48.0,
                  left: 10.0,
                  right: 10.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                          "Welcome",
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                            "To The Ravindra Kushwaha App. \n One tap Club Destination !",
                            style: TextStyle(
                              fontSize: 20.0,
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center),
                      ),
                    ],
                  ),
                )
              ],
            ),
            Container(
              color: Colors.yellow,
              child: Image.asset('images/walkthrough_2.png', fit: BoxFit.cover),
            ),
            Container(
              color: Colors.blueAccent,
              child: Image.asset('images/walkthrough_3.png', fit: BoxFit.cover),
            )
          ],
        ),
        length: 3,
        align: IndicatorAlign.bottom,
        indicatorSpace: 5.0,
        indicatorColor: Colors.white,
        indicatorSelectorColor: Colors.purpleAccent,
        padding: EdgeInsets.all(10.0),
      ),
    );
  }
}

请检查我从上述代码得到的屏幕

屏幕上方，如何去除右侧的白色？

我将这个库用于指标

page_indicator：^0.2.1

【问题讨论】：

标签： android flutter flutter-layout flutter-dependencies

【解决方案1】：

我已经实现了ViewPager (PageView) 功能，通过下面的代码行，我发布了另一个可能对未来用户有所帮助的答案。

我已将此库用于如下指标

page_indicator：^0.2.1

请检查下面的代码行

import 'package:flutter/material.dart';
import 'package:page_indicator/page_indicator.dart';

class MyTutorialScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      child: PageIndicatorContainer(
        pageView: PageView(
          physics: const AlwaysScrollableScrollPhysics(),

          children: <Widget>[
            Stack(
              children: <Widget>[
                Container(
                  height: double.maxFinite,
                  width: double.maxFinite,
                  child:
                      Image.asset('images/walkthrough_1.png', fit: BoxFit.fill),
                ),
                Positioned(
                    top: 40.0,
                    right: 40.0,
                    child: InkWell(
                      onTap: () {
                        print("HERE IS I AM");
                      },
                      child: Text(
                        "SKIP",
                        style: TextStyle(color: Colors.white),
                      ),
                    )),
                Positioned(
                  bottom: 48.0,
                  left: 10.0,
                  right: 10.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                          "Welcome",
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                            "To The Ravindra Kushwaha App. \n One tap Club Destination !",
                            style: TextStyle(
                              fontSize: 20.0,
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center),
                      ),
                    ],
                  ),
                )
              ],
            ),
            Stack(
              children: <Widget>[
                Container(
                  height: double.maxFinite,
                  width: double.maxFinite,
                  child:
                      Image.asset('images/walkthrough_2.png', fit: BoxFit.fill),
                ),
                Positioned(
                    top: 40.0,
                    right: 40.0,
                    child: InkWell(
                      onTap: () {
                        print("HERE IS I AM");
                      },
                      child: Text(
                        "SKIP",
                        style: TextStyle(color: Colors.white),
                      ),
                    )),
                Positioned(
                  bottom: 48.0,
                  left: 10.0,
                  right: 10.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                          "Welcome",
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                            "To The Ravindra Kushwaha App. \n One tap Club Destination !",
                            style: TextStyle(
                              fontSize: 20.0,
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center),
                      ),
                    ],
                  ),
                )
              ],
            ),
            Stack(
              children: <Widget>[
                Container(
                  height: double.maxFinite,
                  width: double.maxFinite,
                  child:
                      Image.asset('images/walkthrough_3.png', fit: BoxFit.fill),
                ),
                Positioned(
                  bottom: 48.0,
                  left: 10.0,
                  right: 10.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                          "Welcome",
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                            "To The Ravindra Kushwaha App. \n One tap Club Destination !",
                            style: TextStyle(
                              fontSize: 20.0,
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign: TextAlign.center),
                      ),
                      Container(
                        padding: const EdgeInsets.all(16.0),

                        child: RaisedButton(
                          child: Text("Let's GO!!"),
                          onPressed: () {},
                        ),
                      ),
                    ],
                  ),
                )
              ],
            )
          ],
        ),
        length: 3,
        align: IndicatorAlign.bottom,
        indicatorSpace: 5.0,
        indicatorColor: Colors.white,
        indicatorSelectorColor: Colors.purpleAccent,
        padding: EdgeInsets.all(10.0),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

请使用下面的行来根据设备的宽度和高度显示图像。尝试下面的代码行，如果有问题请告诉我

 Container(
    height: double.maxFinite, //// USE THIS FOR THE MATCH WIDTH AND HEIGHT
    width: double.maxFinite,
    child:
    Image.asset('images/walkthrough_3.png', fit: BoxFit.fill),
    )

【讨论】：

感谢它的解决方案double.maxFinite