Flutter:-在PageView图像内部未设置为适合屏幕宽度吗? [英] Flutter :- Inside the PageView Image is not setting to fit the screen on width?

问题描述

我正在使用 PageView 来实现分页功能，并在每页上显示图像，并在每页上包含一些文本和按钮.当我使用 Stack 小部件将视图彼此放置时，例如 Android 中的 Relative-layout ，但是我的图像"位于第一页 PageView 未设置为适合屏幕显示我已经尝试过以下解决方案，如下所示

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

我正在使用该库作为指标

page_indicator:^ 0.2.1

解决方案

请使用下面的行根据设备的宽度和高度显示图像.尝试下面的代码行，以备不时之需

 容器(height:double.maxFinite，////将此宽度用于匹配宽度和高度宽度:double.maxFinite，孩子:Image.asset('images/walkthrough_3.png'，适合:BoxFit.fill)，) 

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

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?

I am using this library for the indicator

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图像内部未设置为适合屏幕宽度吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！