[英]How to adjust images size with respect to mobile size while using "CarouselSlider" and put button text on that image in flutter?
我正在嘗試為我的應用程序創建介紹性演練滑塊,但我無法做正確的事情。 使用pub.dev提供carousel_slider。 我無法將圖像填充到整個手機屏幕。 它在左側和右側留下一些空白空間。
使用Carousel Pro我無法在滑動圖像上放置按鈕或文本。 我在一些小問題上花費了數小時,但無法實現我想要的。
這是代碼
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(),
);
}
}
以下是屏幕截圖以供更多說明
使用Carousel_Pro提供由pub.dev,我怎樣才能把文字或按鈕上的圖像。
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(),
))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.