I am new to flutter dart, I have pageview on one of my screen ProfilePage.dart having 3 pageveiws inside of it. There are 2 buttons on the page outside the page view NEXT and BACK and when the user gets to last page the next button changes to DONE.
Code for ProfilePage.dart
import 'dart:typed_data';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:stressed_app_admin/psychiatrist/widgets/contact-details.dart';
import 'package:stressed_app_admin/psychiatrist/widgets/document-upload.dart';
import 'package:stressed_app_admin/psychiatrist/widgets/educational-details.dart';
import 'package:stressed_app_admin/resources/auth_methods.dart';
import 'package:stressed_app_admin/resources/firestore_methods.dart';
import 'package:stressed_app_admin/resources/storage_methods.dart';
import '../utils/colors.dart';
import '../utils/global_varaibles.dart';
class ProfilePage extends StatefulWidget {
final String message;
const ProfilePage({Key? key, required this.message}) : super(key: key);
@override
ProfilePageState createState() => ProfilePageState();
}
class ProfilePageState extends State<ProfilePage> {
late PageController pageController;
final TextEditingController _username = TextEditingController();
final TextEditingController _email = TextEditingController();
final TextEditingController _firstName = TextEditingController();
final TextEditingController _lastName = TextEditingController();
final TextEditingController _contact = TextEditingController();
final TextEditingController _about = TextEditingController();
final TextEditingController _location = TextEditingController();
final TextEditingController _degree = TextEditingController();
final TextEditingController _dataPassOut = TextEditingController();
final TextEditingController _experience = TextEditingController();
final TextEditingController _university = TextEditingController();
Uint8List? _cvValue;
Uint8List? _degreeValue;
late final String cvUrl;
late final String degreeUrl;
late Color contactInfo;
late Color completedTask;
late Color suggestedTask;
int _page = 0;
var data;
bool _uploaded = true;
bool _isLoading = false;
bool _firstPage = true;
bool _lastPage = false;
@override
void initState() {
super.initState();
pageController = PageController();
getPsyData();
setState(() {
contactInfo = darkpurplish;
completedTask = secondaryColor;
suggestedTask = secondaryColor;
});
}
getPsyData() async {
setState(() {
_isLoading = true;
});
data = await AuthMethods().getCurrentPsyDetails();
setState(() {
_isLoading = false;
});
}
@override
void dispose() {
super.dispose();
pageController.dispose();
}
void navigationTapped(int page) {
pageController.animateToPage(
page,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
);
setState(() {
_page = page;
if (_page == 0) {
_firstPage = true;
_lastPage = false;
}
if (_page > 0 && _page < 2) {
_firstPage = false;
_lastPage = false;
}
if (_page == 2) {
_firstPage = false;
_lastPage = true;
}
});
if (page == 0) {
setState(() {
contactInfo = darkpurplish;
completedTask = secondaryColor;
suggestedTask = secondaryColor;
});
}
if (page == 1) {
setState(() {
contactInfo = secondaryColor;
completedTask = secondaryColor;
suggestedTask = darkpurplish;
});
}
if (page == 2) {
setState(() {
contactInfo = secondaryColor;
completedTask = blueColor;
suggestedTask = secondaryColor;
});
}
}
selectCv() async {
FilePickerResult? result = await FilePicker.platform
.pickFiles(type: FileType.custom, allowedExtensions: ['pdf']);
if (result != null) {
PlatformFile file = result.files.first;
setState(() {
_cvValue = file.bytes;
});
} else {
// User canceled the picker
}
}
selectDegree() async {
FilePickerResult? result = await FilePicker.platform
.pickFiles(type: FileType.custom, allowedExtensions: ['pdf']);
if (result != null) {
PlatformFile file = result.files.first;
setState(() {
_degreeValue = file.bytes;
});
} else {
// User canceled the picker
}
}
updateDocuments() async {
if (_cvValue != null && _degreeValue != null) {
cvUrl = await StorageMethods()
.uploadCvToStorage("PsychiatristProfilePics", _cvValue!);
degreeUrl = await StorageMethods()
.uploadDegreeToStorage("PsychiatristProfilePics", _degreeValue!);
if (_username.text.isNotEmpty &&
_firstName.text.isNotEmpty &&
_lastName.text.isNotEmpty &&
_contact.text.isNotEmpty &&
_location.text.isNotEmpty &&
_degree.text.isNotEmpty &&
_about.text.isNotEmpty &&
_dataPassOut.text.isNotEmpty &&
_experience.text.isNotEmpty &&
_university.text.isNotEmpty) {
Map<String, dynamic> psy = {
"username": _username.text,
"firstName": _firstName.text,
"lastName": _lastName.text,
"contact": _contact.text,
"location": _location.text,
"degree": _degree.text,
"about": _about.text,
"passOutDate": _dataPassOut.text,
"experience": _experience.text,
"university": _university.text,
"cvUrl": cvUrl,
"degreeUrl": degreeUrl,
"isVerified": "pending"
};
FireStoreMethods().updatePsychiatrist(psy);
displayDialog(context, "Successfully uploaded");
} else {
displayDialog(context, "Some fields missing data");
}
} else {
displayDialog(context, "not file selected");
}
}
@override
Widget build(BuildContext context) {
if (!_isLoading) {
List<Widget> profileItems = [
ContactDetails(
username: _username..text = data["username"],
email: _email..text = data["email"],
firstName: _firstName,
lastName: _lastName,
contact: _contact,
location: _location,
about: _about),
EducationalDetails(
degree: _degree,
dataPassOut: _dataPassOut,
experience: _experience,
university: _university),
DocumentUpload(cv: _cvValue, degree: _degreeValue),
];
return Scaffold(
backgroundColor: purplish,
body: Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.55,
height: MediaQuery.of(context).size.height * 0.75,
decoration: BoxDecoration(
color: primaryColor,
boxShadow: [
BoxShadow(
color: Colors.black12.withOpacity(0.3),
spreadRadius: 10,
blurRadius: 6,
),
],
),
child: _uploaded && widget.message == "not-verified"
? Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: [
SizedBox(
height: 20,
),
Text(
"Complete the following Steps to get Selected as a Psychiatrist"
.toUpperCase(),
style: GoogleFonts.titilliumWeb(
fontSize: 22, color: darkpurplish),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
navigationTapped(0);
},
child: Container(
width: MediaQuery.of(context).size.width * 0.15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Contact Details",
style: GoogleFonts.titilliumWeb(
fontSize: 16, color: contactInfo),
),
Container(
width: MediaQuery.of(context).size.width,
height: 1,
color: contactInfo,
)
],
),
),
),
SizedBox(
width: 2,
),
InkWell(
onTap: () {
navigationTapped(1);
},
child: Container(
width: MediaQuery.of(context).size.width * 0.15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Educational Background",
style: GoogleFonts.titilliumWeb(
fontSize: 16, color: suggestedTask),
),
Container(
width: MediaQuery.of(context).size.width,
height: 1,
color: suggestedTask,
),
],
),
),
),
SizedBox(
width: 2,
),
InkWell(
onTap: () {
navigationTapped(2);
},
child: Container(
width: MediaQuery.of(context).size.width * 0.15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Upload Documents",
style: GoogleFonts.titilliumWeb(
fontSize: 16, color: completedTask),
),
Container(
width: MediaQuery.of(context).size.width,
height: 1,
color: completedTask,
)
],
),
),
),
],
),
Expanded(
child: PageView(
children: profileItems,
physics: const NeverScrollableScrollPhysics(),
controller: pageController,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_firstPage
? Container(
width: 94,
padding: EdgeInsets.symmetric(
horizontal: 11, vertical: 7),
color: secondaryColor,
child: Text(
"Back".toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 15, color: primaryColor),
),
)
: InkWell(
onTap: () {
navigationTapped(_page - 1);
},
child: Container(
width: 94,
padding: EdgeInsets.symmetric(
horizontal: 11, vertical: 7),
color: purplish,
child: Text(
"Back".toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 15, color: primaryColor),
),
),
),
SizedBox(
width: 15,
),
_lastPage
? InkWell(
onTap: () {
updateDocuments();
},
child: Container(
width: 94,
padding: EdgeInsets.symmetric(
horizontal: 11, vertical: 7),
color: purplish,
child: Text(
"Done".toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 15, color: primaryColor),
),
),
)
: InkWell(
onTap: () {
navigationTapped(_page + 1);
},
child: Container(
width: 94,
padding: EdgeInsets.symmetric(
horizontal: 11, vertical: 7),
color: purplish,
child: Text(
"Next".toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 15, color: primaryColor),
),
),
),
],
)
],
),
)
: Container(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Your request has been sent Successfully. You will informed Once it is Approved."
.toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 22, color: darkpurplish),
),
Text(
"For any issues or queries contact",
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 16, color: greyBlack),
),
Text(
"zeeshan922837@gmail.com",
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 15,
color: darkpurplish,
fontStyle: FontStyle.italic),
),
SizedBox(
height: 20,
),
InkWell(
child: Container(
width: 105,
padding: EdgeInsets.symmetric(
horizontal: 11, vertical: 7),
color: purplish,
child: Row(
children: [
Icon(
Icons.logout,
size: 15,
color: primaryColor,
),
SizedBox(
width: 5,
),
Text(
"logout".toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.titilliumWeb(
fontSize: 15, color: primaryColor),
),
],
),
),
)
],
),
),
),
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
}
}
Output:
Now when I fill in data I press next:
- M first question is how will I make sure that user has filled all fields and only then he/she can move next page ?
- On my Last Page when user Clicks on the DONE button I want all data from all 3 pageviews to be uploaded to my firebase database
OUTPUT of last Page:
I have read almost all the questions available to pageviews on stackoverflow as well as GitHub but none of them was either according to my requirements or quite easily understandable. If you need any further details I can share them too. Looking just for some simple hints of guide. THANK YOU.
