1 year ago

#388992

test-img

laprof

How to set height automatically for CarouselSlider

I use the CarouselSlider package to swipe cards horizontally. The cards contain texts that have different lengths. Currently, I have set the height with MediaQuery, but the height is not always enough, because some texts can be very long. Without height setting the CarouselSlider is only very small, and the height is not taken from the child. How can I set the CarouselSlider to automatically adjust the height based on the text length?

      body: SingleChildScrollView(
        child: CarouselSlider(
          options: CarouselOptions(
            height: MediaQuery.of(context).size.height,    // How to auto set height
            initialPage: _initPage,
            enlargeCenterPage: false,
            viewportFraction: 0.925,
            enableInfiniteScroll: false,
          ),
          items: [
            DreamViewDetailCard(
              dream: dream,
            ),
            DreamViewAnalysisCard(
              dream: dream,
            ),
          ],
        ),
      ),
class DreamViewDetailCard extends StatelessWidget {
  DreamViewDetailCard({
    Key? key,
    required this.dream,
  }) : super(key: key);

  Dream dream;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 50),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            DateSeparator(dreamDate: dream.dateOfDream!),
          ],
        ),
        Container(
          margin: EdgeInsets.all(4),
          padding: EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: colorPaperSurface,
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    dream.title ?? '',
                    style: textStyleTitleOnPaper,
                  ),
                  buildPublicationIcon(),
                ],
              ),
              SizedBox(height: 8),
              Text(
                dream.story ?? '',
                style: textStyleNormalOnPaper,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Image 1) Text card with less height height: MediaQuery.of(context).size.height

Image 2) Text card with more height height: MediaQuery.of(context).size.height

Image 3) Text card without height settings

enter image description here enter image description here enter image description here

flutter

dart

0 Answers

Your Answer

Accepted video resources