问题
I am using the PageView for the view-pager functionality and showing the image on each page with contains some text and button on each page.
As I am using the Stack widget for putting the view on one another like Relative-layout in Android, But My Image on the First Page of the PageView is not set to fit on the screen
I have tried the below solution like below
1).First link
2). Second Link
But not getting the proper solution, I have tried the below lines of code for it,
class MyTutorialScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Material(
child: PageIndicatorContainer(
pageView: PageView(
children: <Widget>[
Stack(
//////ON THIS SECTION I AM GETTIG PROBLEM
children: <Widget>[
Container(
/////// NEED THE SOLUTION ON THIS SECTION
color: Colors.yellow,
child: Image.asset('images/walkthrough_1.png',
fit: BoxFit.fitWidth),
),
Positioned(
top: 40.0,
right: 40.0,
child: InkWell(
onTap: () {
print("HERE IS I AM");
},
child: Text(
"SKIP",
style: TextStyle(color: Colors.white),
),
)),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
],
),
)
],
),
Container(
color: Colors.yellow,
child: Image.asset('images/walkthrough_2.png', fit: BoxFit.cover),
),
Container(
color: Colors.blueAccent,
child: Image.asset('images/walkthrough_3.png', fit: BoxFit.cover),
)
],
),
length: 3,
align: IndicatorAlign.bottom,
indicatorSpace: 5.0,
indicatorColor: Colors.white,
indicatorSelectorColor: Colors.purpleAccent,
padding: EdgeInsets.all(10.0),
),
);
}
}
And please check the screen which I am getting from the above code
Above the screen, how would I remove the white color on the right side?
I am using this library for the indicator
page_indicator: ^0.2.1
回答1:
Please use below line to show image as per device width and height..Try below lines of code and let me know in case of concern
Container(
height: double.maxFinite, //// USE THIS FOR THE MATCH WIDTH AND HEIGHT
width: double.maxFinite,
child:
Image.asset('images/walkthrough_3.png', fit: BoxFit.fill),
)
回答2:
I have implemented the ViewPager (PageView) functionality , by below lines of code, I am posting the answer for the other which can be helpful for the future user.
I have used this library for the indicator like below
page_indicator: ^0.2.1
Please check the below lines of code for it
import 'package:flutter/material.dart';
import 'package:page_indicator/page_indicator.dart';
class MyTutorialScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Material(
child: PageIndicatorContainer(
pageView: PageView(
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: double.maxFinite,
width: double.maxFinite,
child:
Image.asset('images/walkthrough_1.png', fit: BoxFit.fill),
),
Positioned(
top: 40.0,
right: 40.0,
child: InkWell(
onTap: () {
print("HERE IS I AM");
},
child: Text(
"SKIP",
style: TextStyle(color: Colors.white),
),
)),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
],
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.maxFinite,
width: double.maxFinite,
child:
Image.asset('images/walkthrough_2.png', fit: BoxFit.fill),
),
Positioned(
top: 40.0,
right: 40.0,
child: InkWell(
onTap: () {
print("HERE IS I AM");
},
child: Text(
"SKIP",
style: TextStyle(color: Colors.white),
),
)),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
],
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.maxFinite,
width: double.maxFinite,
child:
Image.asset('images/walkthrough_3.png', fit: BoxFit.fill),
),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
Container(
padding: const EdgeInsets.all(16.0),
child: RaisedButton(
child: Text("Let's GO!!"),
onPressed: () {},
),
),
],
),
)
],
)
],
),
length: 3,
align: IndicatorAlign.bottom,
indicatorSpace: 5.0,
indicatorColor: Colors.white,
indicatorSelectorColor: Colors.purpleAccent,
padding: EdgeInsets.all(10.0),
),
);
}
}
来源：https://stackoverflow.com/questions/58028101/flutter-inside-the-pageview-image-is-not-setting-to-fit-the-screen-on-width