Home > Software design >  how to put 2 Carousel Slider in the same page, here is the code with one but I get an error if I put
how to put 2 Carousel Slider in the same page, here is the code with one but I get an error if I put

Time:04-21

//APP BAR

appBar: AppBar(
    title: Text('Fosse'),
    centerTitle: true,
    elevation: 0,
    backgroundColor: Color.fromARGB(255, 157, 146, 114),
    actions: <Widget>[
      IconButton(
        icon: Icon(
          Icons.auto_awesome_outlined,
          color: Color.fromARGB(255, 233, 221, 92),
        ),
        onPressed: () {
          Navigator.pushNamed(context, '/closet');
        },
      ),
    ],
  ),

//FIN APP BAR //Carousel

      body: CarouselSlider(
        options: CarouselOptions(
          viewportFraction: 0.8,
          height: 300.0,
          autoPlay: false,
        ),
        items: [
          //  PATRON DE FOTOS
          "asssets/imageness/rm1.png",
          "asssets/imageness/rm2.png",
          "asssets/imageness/rm3.png",
        ].map((e) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  e,
                  fit: BoxFit.cover,
                ),
              );
            },
          );
        }).toList(),

      ), 
    );
  }
}

CodePudding user response:

import 'package:base1/main.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class creatuoutfit extends StatelessWidget {
  const creatuoutfit({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 255, 255, 255),

      //APP BAR
      appBar: AppBar(
        title: Text('Fosse'),
        centerTitle: true,
        elevation: 0,
        backgroundColor: Color.fromARGB(255, 157, 146, 114),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.auto_awesome_outlined,
              color: Color.fromARGB(255, 233, 221, 92),
            ),
            onPressed: () {
              Navigator.pushNamed(context, '/closet');
            },
          ),
        ],
      ),

//FIN APP BAR

      //Carousel

      body: CarouselSlider(
        options: CarouselOptions(
          viewportFraction: 0.8,
          height: 300.0,
          autoPlay: false,
        ),
        items: [
          //  PATRON DE FOTOS
          "asssets/imageness/rm1.png",
          "asssets/imageness/rm2.png",
          "asssets/imageness/rm3.png",
        ].map((e) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  e,
                  fit: BoxFit.cover,
                ),
              );
            },
          );
        }).toList(),

      ),

CarouselSlider(
        options: CarouselOptions(
          viewportFraction: 0.8,
          height: 300.0,
          autoPlay: false,
        ),
        items: [
          //  PATRON DE FOTOS
          "asssets/imageness/rm1.png",
          "asssets/imageness/rm2.png",
          "asssets/imageness/rm3.png",
        ].map((e) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  e,
                  fit: BoxFit.cover,
                ),
              );
            },
          );
        }).toList(),

      ),




    );
  }
}

CodePudding user response:

body:

//fisrts carousel 
 CarouselSlider(
        options: CarouselOptions(
          viewportFraction: 0.8,
          height: 300.0,
          autoPlay: false,
        ),
        items: [
          //  PATRON DE FOTOS
          "asssets/imageness/rm1.png",
          "asssets/imageness/rm2.png",
          "asssets/imageness/rm3.png",
        ].map((e) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  e,
                  fit: BoxFit.cover,
                ),
              );
            },
          );
        }).toList(),

      ),


//second carousel 
CarouselSlider(
        options: CarouselOptions(
          viewportFraction: 0.8,
          height: 300.0,
          autoPlay: false,
        ),
        items: [
          //  PATRON DE FOTOS
          "asssets/imageness/rm1.png",
          "asssets/imageness/rm2.png",
          "asssets/imageness/rm3.png",
        ].map((e) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  e,
                  fit: BoxFit.cover,
                ),
              );
            },
          );
        }).toList(),

      ),




    );
  }
}
  • Related