Logo

dev-resources.site

for different kinds of informations.

Flutter - Triangular CAROUSEL Slider

Published at
10/11/2023
Categories
flutter
slider
Author
ashishranjan3
Categories
2 categories in total
flutter
open
slider
open
Author
13 person written this
ashishranjan3
open
Flutter - Triangular CAROUSEL Slider

Image description

i want to make a carousel like this so basically there are 5 items there can be more...
but at time 5 items should be visible on the screen .. upon dragging should change positions... left and right both just like how a normal slider works

i have tried to make a design with the stack widget but i dont know how can i convert into a slider or add any other logics to achive this.

class TriangularCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45.h,
      width: 100.w,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Opacity(
                opacity: 0.4,
                child: Image.asset(
                  "assets/logo.png",
                  height: 45.h * 0.25,
                )),
          ),
          Positioned(
            top: 45.h * 0.15,
            left: 100.w * 0.1,
            child: Opacity(
              opacity: 0.6,
              child: Image.asset(
                "assets/logo.png",
                height: 45.h * 0.38,
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 100.w * 0.2,
            right: 100.w * 0.2,
            child: Image.asset(
              "assets/logo.png",
              height: 45.h * 0.7,
            ),
          ),
          Positioned(
            top: 45.h * 0.15,
            right: 100.w * 0.1,
            child: Opacity(
              opacity: 0.6,
              child: Image.asset(
                "assets/logo.png",
                height: 45.h * 0.38,
              ),
            ),
          ),
          Positioned(
            top: 0,
            right: 0,
            child: Opacity(
              opacity: 0.3,
              child: Image.asset(
                "assets/logo.png",
                height: 45.h * 0.25,
              ),
            ),
          ),
        ],
      ),
    );
  }
}


Enter fullscreen mode Exit fullscreen mode
slider Article's
30 articles in total
Favicon
infinity slider
Favicon
Build A Stunning Animated Travel Image Slider Using Html, Css, And JavaScript!
Favicon
Slider in Flutter
Favicon
SLIDER ANIMATION HELP
Favicon
Making a slider puzzle in Java Script
Favicon
#LearnedToday: Slider in pure CSS
Favicon
Flutter - Triangular CAROUSEL Slider
Favicon
looking for a slider package for angular
Favicon
Creating a Slider using Next.js and CSS
Favicon
Create Dynamic Image Slider with PHP and MySQL
Favicon
A step-by-step guide to creating a beautiful slider with Swiper and React
Favicon
Animating using sliders in JavaFX and SceneBuilder
Favicon
Product Gallery Slider for WooCommerce
Favicon
What is a slider and why you should slider on your website?
Favicon
Kaydırıcı robot
Favicon
Basic JavaScript slider ready source
Favicon
Pure CSS Vertical Image Slider Using Only HTML & CSS
Favicon
How to make a simple slider component in React
Favicon
Responsive Image slider using Owl Carousel | HTML & CSS
Favicon
Simple Slider on a pure JavaScript
Favicon
Image Slideshow HTML CSS
Favicon
Ngx Slick Carousel In Angular Material Card with Custom Arrows
Favicon
How to make a Full Slider with javascript in 10 mins
Favicon
Let's build a slider from scratch in React Native
Favicon
Elegant & Beautiful Testimonial Sliders
Favicon
Choppy Slider: The Styles
Favicon
Flutter. A Quarter Round Slider.
Favicon
VueJS: Double range slider component
Favicon
Styling Range Sliders with CSS
Favicon
AWS – Using Multiple (Staging, UAT and Production) Accounts Under AWS Organization

Featured ones: