0

Flutterで以下のタイプのカルーセルビューを作成したい

ここに画像の説明を入力

これまでに試したこと

  • 私はすでにこのcarousel_slider 1.4.1パッケージを持っています:フラッターパッケージは私の要件に従ってカルーセルビューを作成できません
  • ソースを使用して、要件に従って変更しようとしましたが、ここで適切な解決策が得られませんでした。変更されたコードの出力です

ここに画像の説明を入力

私のコード

Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/home.png'),
                  fit: BoxFit.cover,
                ),
                shape: BoxShape.rectangle,
              ),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 50.0,
                    height: 53.0,
                    child: Center(
                      child: Text(
                        "N",
                        style: TextStyle(
                            color: AppColors.textColor, fontSize: 20.0),
                      ),
                    ),
                    padding:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                    decoration: BoxDecoration(
                        border:
                            Border.all(color: AppColors.textColor, width: 2)),
                  ),
                  SizedBox(
                    height: 68,
                  ),
                  Text(
                    "Hi",
                    style: TextStyle(fontFamily: 'f_book', fontSize: 16),
                  ),
                  Text(
                    userName,
                    style: TextStyle(
                        fontFamily: 'f_bold',
                        fontSize: 28,
                        fontWeight: FontWeight.bold),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 40),
                    child: CarouselSlider(
                      items: child,
                      autoPlay: false,
                      height: 400,
                      enableInfiniteScroll: true,
                      initialPage: 0,
                      enlargeCenterPage: true,
                      aspectRatio: 2.0,
                      onPageChanged: (index) {
                        setState(() {
                          _current = index;
                        });
                      },
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.only(top: 40),
                      child: Center(child: Text(Constants.howDoesItWork)))
                ],
              ),
            )

さらに情報が必要な場合は、お知らせください。前もって感謝します。あなたの努力は高く評価されます。

4

0 に答える 0