Флаттер: - Внутри PageView Изображение не настраивается, чтобы соответствовать экрану по ширине?

Question

Я использую PageView для функции пейджера и показываю изображение на каждой странице, содержащее текст и кнопки на каждой странице.Поскольку я использую виджет Stack для наложения вида друг на друга, например Relative-layout в Android, но мое изображение на первой странице PageView не установлено на экране, я попробовал следующеерешение, как показано ниже
1). Первая ссылка
2).Вторая ссылка
Но, не найдя правильного решения, я попробовал следующие строки кода для него,

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

И, пожалуйста, проверьте экран, который я получаю из приведенного выше кода

Над экраном, как убрать белый цвет с правой стороны?

Я использую эту библиотеку для индикатора

указатель страницы: ^ 0.2.1

Answer 1

Пожалуйста, используйте строку ниже, чтобы показать изображение в соответствии с шириной и высотой устройства. Попробуйте ниже строки кода и дайте мне знать, если возникнет проблема

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