Question

我正在使用PageView来实现视图分页器功能，并在每页上显示图像，并在每页上包含一些文本和按钮。当我使用Stack小部件将视图彼此像Relative-layout中的Android一样放置时，但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

Answer 1

请使用以下行根据设备的宽度和高度显示图像。请尝试下面的代码行，以防万一。

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

Answer 2

我已经实现了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),
      ),
    );
  }
}

Flutter：-在PageView图像内部未设置为适合屏幕宽度吗？

2 个答案: