how to build horizontal list view with 1 item visible to select language ( can be controlled with buttons )

Question

i want to create smth like this with flutter to select language. I tried looking for carousel and listviews but nothing.

is there any ready package or should i implement it myself. If so how can I do it.

Answer 1

page view seems to work fine i just have to wrap it in a Container with precise height and width.

class MiniCarousel extends StatefulWidget {
  const MiniCarousel({Key? key, required this.children, required this.function}) : super(key: key);
  final List<Widget> children; // center text
  final Function function;
  @override
  _MiniCarouselState createState() => _MiniCarouselState();
}

class _MiniCarouselState extends State<MiniCarousel> {

  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0, viewportFraction: 1);
  }

  @override
  Widget build(BuildContext context) {
    _pageController = PageController();
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        LeftArrow(
          function: () {
            _pageController.previousPage(
              duration: Duration(milliseconds: 300),
              curve: Curves.bounceInOut,
            );
          },
        ),
        Container(
          height: SizeConfig.defaultSize * 6,
          width: SizeConfig.defaultSize * 10,
          child: PageView(
            onPageChanged: (page) {
              widget.function(page);
            },
            controller: _pageController,
            children: widget.children,
          ),
        ),
        RightArrow(
          function: () {
            _pageController.nextPage(
              duration: Duration(milliseconds: 300),
              curve: Curves.bounceInOut,
            );
          },
        ),
      ],
    );
  }
}