Ad

Flutter Carousel No Image And Some Other Difficulties

- 1 answer

I am new to flutter as well as app dev. I was trying to implement a STAEFUL carousel that responds and redirects to a certain link when an image in the carousel is clicked.

Here are the problems I faced.

  1. I am not getting how to make the carousel images stateful should I implement a Gesture detector or Inkwell?

  2. Should Every image has to be tagged within the [LIST] or the entire carousel can be tagged with a single inkwell or gesture detector?

  3. Please have a look in the code, is it possible to map the redirect addresses as a list! (This will be much easier to add images, but what is bothering me here is, do I have to recompile and upload the app to AppStore each time I add new image address and respective redirect link?)

  4. Most importantly the carousel isn't showing the images only the URL noimage in carousel

  1. what do these mean in this part of the code?

[LIST].map((i) {}

and

'text $i'

 items: [imgList].map((i) {
          return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(color: Colors.blueAccent),
              child: Text('text $i', style: TextStyle(fontSize: 16.0),)
          );

here is the entire code


import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
//import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_options.dart';






 List<String> imgList =

 [
   'https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg',
   'https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png',
];







 List<String> redirectList =
 [
   'img 1 redirect link',
   'img 2 redirect link',
 ];      //yet to be configured








class VerticalSliderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CarouselSlider(

        options: CarouselOptions(
          aspectRatio: 2.0,
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 3),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,

        ),


        items: [imgList].map((i) {
          return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(color: Colors.blueAccent),
              child: Text('text $i', style: TextStyle(fontSize: 16.0),)
          );
        }
        ).toList(),
      ),

    );
  }
}


Ad

Answer

https://github.com/Amit506/courouselexample

in this link i have uploaded correct working courousel slider . if you want to know the differenve between text widget and image widget you should refer to official documentation of flutter they have written all the information of widgets. https://api.flutter.dev/flutter/widgets/Image-class.html

https://github.com/Amit506/dart-foods/blob/main/lib/TabBars.dart/TabBar1.dart

in this link i have used courousel builder in one of my project you can refer to it for advance courousel slider.

Ad
source: stackoverflow.com
Ad