How to add multiple images on top of the background image

How to add multiple images on top of the background image - android

I have a piece of code here which makes up the body of the login and register screens. I added an image at the very top but my question is how do i add multiple images for the body?
I have some images i want to add in different positions for blur effects but whenever do either nothing shows up or gives me an error about the constraints.
When i add multiple containers with a single image in each one, i get the constraint error.
Everything was added in pubspec.yaml and in the folders correctly.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/register.png"),
alignment: Alignment.topCenter,
//fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
child: ListView(
children: [
if (onBackPressed == null) verticalSpaceLarge,
if (onBackPressed != null) verticalSpaceRegular,
if (onBackPressed != null)
IconButton(
padding: EdgeInsets.zero,
onPressed: onBackPressed,
alignment: Alignment.centerLeft,
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
Center(
child: Text(
title!,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
verticalSpaceSmall,
SizedBox(
child: Center(
child: Text(
subtitle!,
style: ktsMediumGreyBodyText,
),
),
),
verticalSpaceRegular,
form!,
if (onForgotPassword != null)
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: onForgotPassword,
child: Center(
child: Text(
'Forgot Password?',
style: ktsMediumGreyBodyText.copyWith(),
),
),
),
),
verticalSpaceRegular,
if (validationMessage != null)
Center(
child: Text(
validationMessage!,
style:
TextStyle(color: Colors.red, fontSize: kBodyTextSize),
),
),
if (validationMessage != null) verticalSpaceRegular,
GestureDetector(
onTap: onMainButtonTapped,
child: Container(
width: double.infinity,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: kcPrimaryColor,
borderRadius: BorderRadius.circular(8),
),
child: busy!
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
)
: Text(
mainButtonTitle!,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
),
verticalSpaceRegular,
if (onCreateAccountTapped != null)
GestureDetector(
onTap: onCreateAccountTapped,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
verticalSpaceMedium,
Text(
"Don\'t have an account?",
style: TextStyle(color: Colors.white),
),
horizontalSpaceTiny,
Text(
"SIGN UP",
style: TextStyle(color: kcPrimaryColor),
),
],
),
),
),
if (showTermsText!)
Center(
child: Text(
"By signing up you agree to our terms, conditions and privacy policy",
style: ktsMediumGreyBodyText,
textAlign: TextAlign.center,
),
),
],
),
),
),
);
}
}

Related

How to remove padding from top of ListTile in Drawer?

I can not remove the indent from the first ListTile in any way. I think this is some kind of default indent, but I could not overcome it. Is it possible? Attached is the code and screenshot.
Drawer(
child: Container(
padding: EdgeInsets.zero,
child: Column(
children: <Widget>[
SizedBox(
height: 88.0,
width: 1000,
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Настройки',
style: TextStyle(
color: Colors.white,
fontSize: MainStyle.p.fontSize
),
),
),
),
Expanded(
child: Column(
children: <Widget>[
ListTile(
title: Text(
'Язык',
style: TextStyle(
fontSize: MainStyle.p.fontSize
),
),
subtitle: Text(
"Русский",
),
trailing: IconButton(
icon: Icon(Icons.edit),
color: Colors.black,
onPressed: () {
},
),
),
ListTile(
title: Text(
'Выход',
style: TextStyle(
fontSize: MainStyle.p.fontSize
),
),
onTap: () {
exit();
},
),
],
)
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Column(
children: <Widget>[
ListTile(
title: Text(
globalState.version,
style: TextStyle(
fontSize: 15,
color: Colors.grey
),
textAlign: TextAlign.center,
),
),
],
)
)
),
],
),
)
);
P.S. There is not any details, but StackOverflow make me write more text, because of "It looks like your post is mostly code; please add some more details."

add this line to your DrawerHeader:
margin: EdgeInsets.zero,

how to make button together on flutter

Hello i have some problem, I need to make button together on my flutter code Like this,
but when i try on flutter it become like This, is there any way to make it like in first image?
heres my code for the button
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.blue)),
onPressed: () {},
child: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
Expanded(
child: SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.white),
),
onPressed: () {},
child: Text(
'Daftar',
style: TextStyle(color: Colors.blue),
),),
),
),
],
),

var selectedButton = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
margin: EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
shape: BoxShape.rectangle,
border: Border.all(color: Colors.blue, width: 3)),
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
color: selectedButton == 0 ? Colors.blue : Colors.white),
child: TextButton(
onPressed: () {
setState(() {
selectedButton = 0;
});
},
style: TextButton.styleFrom(
primary: selectedButton == 0 ? Colors.white : Colors.blue,
),
child: Text(
'TextButton',
style: TextStyle(fontSize: 16),
),
),
)),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
color: selectedButton == 1 ? Colors.blue : Colors.white),
child: TextButton(
onPressed: () {
setState(() {
selectedButton = 1;
});
},
style: TextButton.styleFrom(
primary: selectedButton == 1 ? Colors.white : Colors.blue,
),
child: Text(
'TextButton',
style: TextStyle(fontSize: 16),
),
),
)),
],
),
),
),
);
}

Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 260,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(
15,
),
),
),
),
),
onPressed: () {},
child: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white),
),
onPressed: () {},
child: Text(
'Daftar',
style: TextStyle(color: Colors.blue),
),
),
),
],
),
),
],
),
),

How to add vertical spacing to widgets Flutter

I have a piece of code here which makes up the body of the login and register screens. Everything is in the position i want but i would like to space them out a little. The two input fields, title, subtitle, button and textbutton are too close together vertically.
I tried to use mainaxisalignment.spacebetween but i get a constraint error and everything i have on the screen disappears afterwards except the background.
The body used by the register and login screen:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/register.png"),
alignment: Alignment.topCenter,
),
),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/bottomleft.png'),
alignment: Alignment.bottomLeft,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/toptop.png'),
alignment: Alignment.topRight,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/topbig.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeat),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/top.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatX),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
child: ListView(
children: [
if (onBackPressed == null) verticalSpaceLarge,
if (onBackPressed != null) verticalSpaceRegular,
if (onBackPressed != null)
IconButton(
padding: EdgeInsets.zero,
onPressed: onBackPressed,
alignment: Alignment.centerLeft,
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
Center(
child: Text(
title!,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
Align(
alignment: Alignment.center,
child: SizedBox(
child: Center(
child: Text(
subtitle!,
style: ktsMediumGreyBodyText,
),
),
),
),
form!,
if (onForgotPassword != null)
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: onForgotPassword,
child: Center(
child: Text(
'Forgot Password?',
style: ktsMediumGreyBodyText.copyWith(),
),
),
),
),
if (validationMessage != null)
Center(
child: Text(
validationMessage!,
style: TextStyle(
color: Colors.red, fontSize: kBodyTextSize),
),
),
if (validationMessage != null) verticalSpaceRegular,
GestureDetector(
onTap: onMainButtonTapped,
child: Container(
width: double.infinity,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: kcPrimaryColor,
borderRadius: BorderRadius.circular(8),
),
child: busy!
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
)
: Text(
mainButtonTitle!,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
),
if (onCreateAccountTapped != null)
GestureDetector(
onTap: onCreateAccountTapped,
child: Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don\'t have an account?",
style: TextStyle(color: Colors.white),
),
Text(
"SIGN UP",
style: TextStyle(color: kcPrimaryColor),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"OR SIGN IN WITH",
style: TextStyle(color: kcMediumGreyColor),
),
],
),
],
),
),
),
if (showTermsText!)
Center(
child: Text(
"By signing up you agree to our terms, conditions and privacy policy",
style: ktsMediumGreyBodyText,
textAlign: TextAlign.center,
),
),
],
),
),
],
),
),
);
}
}
the login screen:
Widget build(BuildContext context) {
return ViewModelBuilder<LoginScreenModel>.reactive(
builder: (context, model, child) => Scaffold(
body: AuthenticationLayout(
busy: model.isBusy,
onCreateAccountTapped: () {},
//validationMessage: model.validationMessage,
title: 'SIGN IN',
subtitle: 'please fill the form below',
mainButtonTitle: 'SIGN IN',
form: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: 'Username',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.person,
color: Colors.white,
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
),
],
),
onForgotPassword: () {},
),
),
viewModelBuilder: () => LoginScreenModel(),
);
}
}

Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 100),
SecondWidget(),
],
),

You should Add SizedBox() in between two Widgets, or Set Padding to your widgets or you use Container also like below:
Using SizedBox()
Column(
children:[
Widget 1(),
SizedBox(height:10),
Widget 2(),
SizedBox(height:10),
Widget 3(),
],
),
Using Padding()
Column(
children:[
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
Using Container()
Column(
children:[
Container(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
You should use padding on your choice like:
EdgeInsets.all(8.0),
EdgeInsets.only(left:8.0,top:8.0,right:8.0,bottom:8.0),
EdgeInsets.symmetric(vertical: 8.0,horizontal:8.0),

You may add some SizedBox() between or set margin to the components.

Use SizedBox widget to add vertical spacing to your widget.
For e.g
SizedBox(height: 16),

Flutter Swipe Cards Lagging and Swiping is too slow what is the solution to make it fast?

I am building a tinder and bumble like dating app in a flutter. So, I am using swipe cards and as I have to make it scrollable so when I make it scrollable then the swiping is too slow and there is so much lagging so is there any solution to get rid of it?
Here is my code:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:swipe_cards/swipe_cards.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<String> _images = [
"https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://static01.nyt.com/images/2019/11/17/books/review/17Salam/Salam1-superJumbo.jpg",
"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
"https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
"https://images.unsplash.com/photo-1488716820095-cbe80883c496?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80",
"https://images.unsplash.com/photo-1485043433441-db091a258e5a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
];
List<SwipeItem> _swipeItems = [];
MatchEngine? _matchEngine;
#override
void initState() {
// TODO: implement initState
for (int i = 0; i < _images.length; i++) {
_swipeItems.add(SwipeItem(content: _images[i]));
}
_matchEngine = MatchEngine(swipeItems: _swipeItems);
super.initState();
}
#override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
//backgroundColor: Color(0xff7cc8cc),
appBar: AppBar(
backgroundColor: Color(0xff76c9b2),
centerTitle: true,
title: Text('Flutter Tinder Cards'),
),
body: SwipeCards(
matchEngine: _matchEngine!,
onStackFinished: () {},
itemBuilder: (context, index) {
return Container(
height: screenHeight,
width: screenWidth,
child: Card(
margin: EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(0)),
side: BorderSide(color: Colors.grey)
),
child: SingleChildScrollView(
child: Column(
children: [
CachedNetworkImage(
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
height: screenHeight,
width: screenWidth,
fit: BoxFit.cover,
//imageUrl: imgUrls![0],
imageUrl: _images[0],
),
Padding(
padding: const EdgeInsets.only(
left: 23.0,
top: 12,
bottom: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Poonam, 18',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black87),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 23,
),
child: Row(
children: [
Icon(
Icons.location_on_sharp,
size: 20,
),
SizedBox(
width: 4,
),
Text(
'Surat, India',
style: TextStyle(
fontSize: 18,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Personal Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
SizedBox(
height: 6,
),
Text(
'Ex - Zerodha, Ex - Grant Thornton. I used to crunch numbers and value companies for a living, now I’m trying to build one.',
style: TextStyle(fontSize: 12),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Height',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
"5'11",
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Community',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Vaishnav',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Gender',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Female',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Workout',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Regularly',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![1] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![1],
imageUrl: _images[1],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Professional Information',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Education',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Master Degree',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Worklife',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Salary',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Above 10Lpa',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![2] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![2],
imageUrl: _images[2],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Social Life',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Drinking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Smoking',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Never',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
//imageUrl: imgUrls![3],
imageUrl: _images[3],
),
),
Padding(
padding: const EdgeInsets.only(
top: 12, left: 23, right: 22, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Others',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 18),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Zodiac Sign',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Leo',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
),
SizedBox(width: 20),
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Political inclination',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Apolitics',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Row(
children: [
Container(
width: 140,
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: ListTile(
title: Text(
'Movies',
style: TextStyle(
color: Colors.black54, fontSize: 10),
),
subtitle: Text(
'Hindi Cinema',
style: TextStyle(
color: Colors.black87, fontSize: 14),
),
),
),
)
],
),
),
SizedBox(
height: 30,
),
//imgUrls![4] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[4],
//imageUrl: imgUrls![4],
),
),
SizedBox(
height: 20,
),
//imgUrls![5] == ''
Container(
height: 569,
child: CachedNetworkImage(
placeholder: (context, url) =>
CircularProgressIndicator(),
fit: BoxFit.cover,
imageUrl: _images[5],
//imageUrl: imgUrls![5],
),
),
SizedBox(
height: 80,
)
],
),
),
),
);
},
),
);
}
}
Here, instead of SinglechildScrollView I have also tried to use ListView and ListView.builder but the same problem appears.

You are testing the app in a emulator or a physical device? Debug mode or release?
Using debug mode all the app looks like slow and has a lot of lagging, even more when using a emulator.

Flutter :- Inside the PageView Image is not setting to fit the screen on width?

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

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),
)

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),
),
);
}
}

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to add multiple images on top of the background image - android

Related

How to remove padding from top of ListTile in Drawer?

how to make button together on flutter

How to add vertical spacing to widgets Flutter

Flutter Swipe Cards Lagging and Swiping is too slow what is the solution to make it fast?

Flutter :- Inside the PageView Image is not setting to fit the screen on width?

Categories

Resources