Блог

Я использую swiper и хочу, чтобы на экране отображалось полтора виджета карты с первой картой, выровненной слева. Однако первая карта всегда выравнивается по центру, как показано на рисунке. Есть ли способ решить эту проблему?

Код для свайпера приведен ниже:

   @override
  _EventSwiperState createState() => _EventSwiperState();
}

class _EventSwiperState extends State<EventSwiper> {
  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    Color starColor = Colors.orange;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.all(18.0),
          child: Text('Upcoming Events',style: TextStyle(fontSize: 21,
              color:Colors.white,
              fontWeight: FontWeight.bold,
              fontFamily: 'Nunito'),),
        ),
        Container(
          height: height * 0.33,
          width: width,
          child: Swiper(
            // itemWidth: width*0.6,
            itemBuilder: (BuildContext context, int index) {
              return EventCard(events[index]);
            },
            // itemHeight: height / 4.2,
            itemCount: events.length,
            layout: SwiperLayout.DEFAULT,
            index: 0,
            viewportFraction: 0.8,
            scale: 1.1,
            loop: false,
            itemWidth: width*0.9,
            control: SwiperControl(iconNext: null, iconPrevious: null),
          ),
        ),
      ],
    );
  }
 

Код для индивидуальной карты приведен ниже:

 class EventCard extends StatefulWidget {
  final Event events;
  const EventCard(this.events);

  @override
  _EventCardState createState() => _EventCardState();
}

class _EventCardState extends State<EventCard> {
  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return Container(
      margin: EdgeInsets.symmetric(horizontal: width / 24,),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        color: Color(0xff282828),
      ),
      child: Text(widget.events.emoji)
);  }
}