The swap widget so that the under widget has been fixed

user_9010134 0
Viewed 42

I have a create so simple slidable view pager with CarouselSlider:

return Scaffold(
    body: CarouselSlider(
  options: CarouselOptions(
    viewportFraction: 1,
    // aspectRatio: 1,
    height: double.maxFinite,
    // enlargeCenterPage: true,
  ),
  items: List.generate(
      10,
      (i) => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Container(
                  color: (i % 2 == 0) ? Colors.red : Colors.green,
                ),
              ),
              Text('text $i', style: TextStyle(fontSize: 16.0)),
            ],
          )),
));

This is its result:

enter image description here

But as you can see next container connects to the first widget, I want when the first widget to be swapped to the left, the next widget appears under the first widget Not next to it. It looks like the following widget is fixed and we remove the top widget.

dart flutter swap
3 Answers

You can use a package called stacked_page_view, it is very simple, lightweight, and similar to the same original PageView in usage.

Example Snippet:

PageView.builder(
  itemCount: 10,
  scrollDirection: Axis.vertical,
  controller: pageController,
  itemBuilder: (context, index) {
    return StackPageView(
      controller: pageController,
      index: index,
      child: Container(
        color: (colors..shuffle()).first,
        child: Center(
          child: Text(
            '$index',
            style: TextStyle(
              color: Colors.white,
              fontSize: 25,
            ),
          ),
        ),
      ),
    );
  },
)

enter image description here

Note: You can control the scroll axis with the property scrollDirection inside PageView.builder() with values of Axis.vertical or Axis.horizontal.

user_112179450

I finally find a way to create stack page view, This is a full codes:

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

import 'package:flutter/material.dart';

import 'dummy_data.dart';
import 'page_view_item.dart';
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  /// The current page of the page view
   double _page = 0;

  /// The index of the leftmost element of the list to be displayed
  int get _firstItemIndex => _page.toInt();

  /// Controller to get the current position of the page view
  final _controller = PageController(
    viewportFraction: 0.5,
  );

  /// The width of a single item
  late final _itemWidth =
      MediaQuery.of(context).size.width * _controller.viewportFraction;

@override
  void initState() {
    super.initState();
    _controller.addListener(() => setState(() {
          _page = _controller.page!;
        }));
  }
   @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("LV Scroll"),
      
      ),
      body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          
          Stack(
          children: [
            Positioned.fill(
              child: Align(
                alignment: Alignment.centerLeft,
                child: SizedBox(
                  width: _itemWidth,
                  child: FractionallySizedBox(

                    child: PageViewItem(
                      index: _firstItemIndex,
                      width: _itemWidth,
                      url: model[_firstItemIndex],

                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 250,
              child: PageView.builder(
                padEnds: false,
                controller: _controller,
                itemBuilder: (context, index) {
                  return Opacity(
                    opacity: index <= _firstItemIndex ? 0 : 1,
                    child: PageViewItem(
                      index: index,

                      width: _itemWidth,
                      url: model[index],

                    ),
                  );
                },
                itemCount: model.length,
              ),
            ),
          ],
    ),
        ],
      ),
    );
  }

}

it's result :

enter image description here

and its reference;

user_90101340

You can use a package called expandable_page_view, it is a PageView widget adjusting its height to currently displayed page. It accepts the same parameters as classic PageView.

ExpandablePageView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Container(color: Colors.blue);
  },
),

enter image description here

user_112179450
Related