「CarouselSlider」を使用しながらモバイルサイズに対して画像サイズを調整し、その画像にボタンテキストをフラッターで配置するにはどうすればよいですか?

ファイザンカマル|

アプリのイントロウォークスルースライダーを作成しようとしていますが、正しく実行できません。pub.devが提供するcarousel_sliderを使用します。モバイル画面全体に画像を入力できません。左側と右側の両方に空きスペースが残ります。

カルーセルプロ使用すると、スライド画像にボタンやテキストを配置できません。私はいくつかの小さな問題に何時間も費やしましたが、私が望むものを達成することができませんでした。

これがコードです

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


void main() {
  runApp(MaterialApp(
    home: MyApp(), // Making initializing home sceen
  ));
}

List<String> imgList = [
  "lib/assets/images/sunset.jpg",
  "lib/assets/images/sample3.jpg",
  "lib/assets/images/sample2.jpg",
  "lib/assets/images/sunshine.jpg",
  "lib/assets/images/leaf.png",


];
int current = 0;

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // var _userName = TextEditingController();

  @override
  Widget build(BuildContext context) {
    Container(
              child: ImageCarousel(),
            );
}


class ImageCarousel extends StatefulWidget {
  @override
  _ImageCarouselState createState() => _ImageCarouselState();
}

class _ImageCarouselState extends State<ImageCarousel> {
  @override
  Widget build(BuildContext context) {

// >>>>>>>>>>>>  C A R O U S E L    S L I D E R    C O D E

    return CarouselSlider(
      height: double.infinity,
      initialPage: 0,
      enableInfiniteScroll: false,
      onPageChanged: (index) {
        setState(() {
          current = index;
        });
      },
      items: imgList.map((imgUrl) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              //width: MediaQuery.of(context).size.width,
              width: double.infinity,
              margin: EdgeInsets.symmetric(horizontal: 1),
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Image(
                image: AssetImage(
                  imgUrl,
                ),
                fit: BoxFit.cover,
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

以下は、より明確にするためのスクリーンショットです

スクリーンショット1 スクリーンショット2

pub.devが提供するCarousel_Proを使用して、画像の上にテキストやボタンを配置するにはどうすればよいですか。

class ImageCarousel extends StatefulWidget {
  @override
  _ImageCarouselState createState() => _ImageCarouselState();
}

class _ImageCarouselState extends State<ImageCarousel> {
  @override
  Widget build(BuildContext context) {
    return Carousel(
          images: [
          AssetImage("lib/assets/images/sample2.jpg"),
          AssetImage("lib/assets/images/sample3.jpg"),
        ]
    );

スクリーンショット3 スクリーンショット4

ところで、pubspec.yamlにすべてのパッケージとイメージをインストールしました。

ナッツ

carousel_sliderページ全体のセットを埋めるために:viewportFraction: 1.0

画像の上にものを置くには、スタックを作成します。

CarouselSlider(
          height: double.infinity,
          viewportFraction: 1.0,
          initialPage: 0,
          enableInfiniteScroll: false,
          items: imgList.map((imgUrl) {
            return Stack(
              children: <Widget>[
                Image(
                  height: double.infinity,
                  image: NetworkImage(
                    imgUrl,
                  ),
                  fit: BoxFit.cover,
                ),
                Text("TEST")
              ],
            );
          }).toList(),
        ))

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ