Как сделать карусель как смахивание на сложенные карты? - PullRequest
Новая
       78

Как сделать карусель как смахивание на сложенные карты?

0 голосов
/ 29 апреля 2020

Я пытаюсь положить стопку карт в центре флаттера. Который я пытаюсь сделать каруселью, например, проведением или ползунком только слева направо или справа налево. Справа налево появится следующая карта и проведите пальцем слева направо, чтобы прежняя карта вернулась. Что-то вроде пример ссылки на анимацию

До сих пор я получил желаемый вид с виджетами Stack и Positioned. Теперь, как мне сделать слайд или анимацию похожими на пример?

До сих пор пытался сделать это с помощью draggable, который перетаскивает все вокруг, а это не то поведение, которое я ищу. Затем я посмотрел на PageView, который не будет работать с виджетом Positioned, так как ожидается, что он будет под Stack. Так что на данный момент я не уверен, как это сделать? Любое руководство или пример были бы действительно полезны, так как Я только начал трепетать неделю . 

return Scaffold(
  body: SafeArea(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SvgPicture.asset(
                  'assets/images/group_6.svg',
                  fit: BoxFit.scaleDown,
                ),
                SizedBox(width: 10),
                Text(
                  'My cool Header',
                  style: TextStyle(
                      color: const Color(0xFF000000),
                      fontSize: Constants.height / 70,
                      fontFamily: 'Exo2',
                      fontWeight: FontWeight.w600),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 13,
            child: Stack(
              overflow: Overflow.visible,
              alignment: Alignment.center,
              children: <Widget>[
                Positioned(
                  right: (sizingInformation.screenSize.width * 0.09),
                  left: (sizingInformation.screenSize.width * 0.21),
                  child: Card(
                    color: Colors.blue,
                    elevation: 10.0,
                    child: Container(
                      height: (sizingInformation.screenSize.height * 0.5),
                    ),
                  ),
                ),
                Positioned(
                  right: sizingInformation.screenSize.width * 0.15,
                  left: sizingInformation.screenSize.width * 0.15,
                  child: Card(
                    color: Colors.red,
                    elevation: 10.0,
                    child: Container(
                      height: (sizingInformation.screenSize.height * 0.55),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 2,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Some cool text',
                    style: TextStyle(
                      color: const Color(0xFF000000),
                      fontSize: Constants.height / 70,
                      fontFamily: 'Exo2',
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Text(
                    'Some cool text',
                    style: TextStyle(
                        color: const Color(0xFF000000),
                        fontSize: Constants.height / 70,
                        fontFamily: 'Exo2',
                        fontWeight: FontWeight.w600),
                  ),
                ]),
          ),
          Expanded(
            flex: 3,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // Search
                IconButton(
                    icon: SvgPicture.asset(
                      'assets/images/group_9.svg',
                      fit: BoxFit.contain,
                    ),
                    onPressed: () {
                      widget.comingFromLogin
                          ? Navigator.push(context,
                              SlideRightRoute(page: SearchFoodPage()))
                          : _loginPopUp();
                    }),

                // Add Event
                IconButton(
                  icon: SvgPicture.asset(
                    'assets/images/group_26.svg',
                    fit: BoxFit.contain,
                  ),
                  onPressed: () {
                    widget.comingFromLogin
                        ? Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Events()))
                        : _loginPopUp();
                  },
                ),

                // Profile
                IconButton(
                    icon: SvgPicture.asset(
                      'assets/images/group_8.svg',
                      fit: BoxFit.contain,
                    ),
                    onPressed: () {
                      widget.comingFromLogin
                          ? Navigator.push(context,
                              SlideLeftRoute(page: ProfileDrawer()))
                          : _loginPopUp();
                    }),
              ],
            ),
          ),
        ]),
  ),
);

1 Ответ

0 голосов
/ 30 апреля 2020

Это что-то вроде этой библиотеки: flutter_swiper , макет стека 

Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  itemWidth: 300.0,
  layout: SwiperLayout.STACK,
)
...