Flutter :- PageView Image 内部没有设置为适合屏幕的宽度? [英] Flutter :- Inside the PageView Image is not setting to fit the screen on width?

问题描述

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

I am using the PageView for the view-pager functionality and showing the image on each page with contains some text and button on each page. As I am using the Stack widget for putting the view on one another like Relative-layout in Android, But My Image on the First Page of the PageView is not set to fit on the screen I have tried the below solution like below
1).First link
2). Second Link
But not getting the proper solution, I have tried the below lines of code for it,

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. 
 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),
      ),
    );
  }
}

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

And please check the screen which I am getting from the above code

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

Above the screen, how would I remove the white color on the right side?

我将这个库用于指标

page_indicator:^0.2.1

推荐答案

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

Please use below line to show image as per device width and height..Try below lines of code and let me know in case of concern

 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),
    )

这篇关于Flutter :- PageView Image 内部没有设置为适合屏幕的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！