Flutter: Галерея слайдеров с контейнером переполнения

Question

Я застрял с одной проблемой. Я новичок с трепетом, пытаясь понять, как сделать простую свайп влево / вправо галерею.

Я ищу виджет, который поддерживает жесты и некоторые вид переполнения.

Итак, мне нужен контейнер с фиксированной (шириной / высотой, которую я могу определить), и все, что находится за пределами этого контейнера, должно быть скрыто, и когда пользователь прокручивает внутреннее содержимое, он должен показывать следующий слайд. Не могли бы вы указать мне, как лучше всего реализовать это с помощью Flutter и какие контейнеры лучше всего подходят для этих целей. Спасибо

UPD 1: Это должен быть не весь экран, а конкретный c контейнер.

Answer 1

Вам просто нужно использовать виджет PageView для функциональности окна просмотра, вы можете использовать его по горизонтали или по вертикали по вашему требованию. Так как вы хотите горизонтальный PageView, я использовал scrollDirection: Axis.horizontal для него. Я создал его демонстрацию, проверьте ее один раз

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  static final GlobalKey<ScaffoldState> _scaffoldKey =
  GlobalKey<ScaffoldState>();
  ///Page Controller for the PageView
  final controller = PageController(
    initialPage: 0,
  );
  @override
  Widget build(BuildContext context) {
    Size _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'Horizontal Viewpager',
          style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,),
        ),
      ),
      ///A Page View with 3 children
      body: PageView(
        controller: controller,
        scrollDirection:  Axis.horizontal,

      physics: BouncingScrollPhysics(),
        pageSnapping: true,
        children: <Widget>[
          Container(
            color: Colors.white,
            child: Card(
              color: Colors.lightBlue,
              elevation: 4,
              margin: EdgeInsets.all(24),
              child: Center(
                child: Text(
                  "Card 1",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24),
                ),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            child: Card(
              color: Colors.purpleAccent,
              elevation: 4,
              margin: EdgeInsets.all(24),
              child: Center(
                child: Text(
                  "Card 2",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24),
                ),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            child: Card(
              color: Colors.pink,
              elevation: 4,
              margin: EdgeInsets.all(24),
              child: Center(
                child: Text(
                  "Card 3",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

И вывод вышеуказанной программы следующим образом:

Вы можете проверить мой другой пример, где я создал прокручиваемый с фиксированной высотой Щелкните здесь

Я публикую еще один пример, так как вам нужен индикатор с обеих сторон PagewView для этого вам нужно использовать Row с Expaned, как показано ниже

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

    class _HomeScreen extends State<HomeScreen> {
      static final GlobalKey<ScaffoldState> _scaffoldKey =
      GlobalKey<ScaffoldState>();

      var selectedPage = 0;


      PageController _controller = PageController(initialPage: 0, keepPage: true);

      @override
      Widget build(BuildContext context) {
        Size _screenSize = MediaQuery
            .of(context)
            .size;
        return Scaffold(
          key: _scaffoldKey,
          appBar: AppBar(
            centerTitle: true,
            title: Text(
              'Horizontal Viewpager',
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,),
            ),
          ),

          ///A Page View with 3 children
          body: Container(


            child:Container(
              height: MediaQuery.of(context).size.height*0.4,
              child:  Row(
                children: <Widget>[

                  Expanded(
                    flex: 1,
                    child:
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      highlightColor: Colors.pink,
                      onPressed: () {
                        setState(() {
                          if (selectedPage > 0) {
                            selectedPage = selectedPage - 1;
                            _controller.jumpToPage(selectedPage);
                            print("VALUES==>>>>> $selectedPage");
                          }
                        });
                      },
                    ),
                  ), Expanded(
                    flex: 8,
                    child: PageView(

                      controller: _controller,
                      scrollDirection: Axis.horizontal,
                      physics: BouncingScrollPhysics(),

                      onPageChanged: (index)
                      {
                        selectedPage= index;
                      },
                      pageSnapping: true,
                      children: <Widget>[
                        Container(
                          color: Colors.white,
                          child: Card(
                            color: Colors.lightBlue,
                            elevation: 4,
                            margin: EdgeInsets.all(24),
                            child: Center(
                              child: Text(
                                "Card 1",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24),
                              ),
                            ),
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          child: Card(
                            color: Colors.purpleAccent,
                            elevation: 4,
                            margin: EdgeInsets.all(24),
                            child: Center(
                              child: Text(
                                "Card 2",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24),
                              ),
                            ),
                          ),
                        ),
                        Container(
                          color: Colors.white,
                          child: Card(
                            color: Colors.pink,
                            elevation: 4,
                            margin: EdgeInsets.all(24),
                            child: Center(
                              child: Text(
                                "Card 3",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child:
                    IconButton(
                      icon: Icon(Icons.arrow_forward),
                      highlightColor: Colors.pink,
                      onPressed: () {
                        if (selectedPage <3) {
                          selectedPage = selectedPage + 1;
                          _controller.jumpToPage(selectedPage);

                          print("VALUES==>> $selectedPage");
                        }
                      },
                    ),
                  )

                ],
              ),
            )


           ,

          )

          ,
        );
      }
    }

Пожалуйста, проверьте приведенный ниже вывод

Answer 2

Вы можете использовать пакет carousel_slider 2.1.0.

Он также имеет множество параметров настройки.

https://pub.dev/packages/carousel_slider