アプリのイントロウォークスルースライダーを作成しようとしていますが、正しく実行できません。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(),
);
}
}
以下は、より明確にするためのスクリーンショットです
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"),
]
);
ところで、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]
コメントを追加