376 lines
12 KiB
Dart
376 lines
12 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:lba/gen/assets.gen.dart';
|
|
import 'package:lba/screens/nearby/nearby.dart';
|
|
import 'package:lba/widgets/interestsUserInfo.dart';
|
|
import 'package:lba/widgets/loginButton.dart';
|
|
|
|
class UserInfo extends StatefulWidget {
|
|
const UserInfo({super.key});
|
|
|
|
@override
|
|
State<UserInfo> createState() => _UserInfoState();
|
|
}
|
|
|
|
class _UserInfoState extends State<UserInfo> {
|
|
DateTime? selectedDate;
|
|
String? selectedGender;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: SafeArea(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
IconButton(
|
|
icon: SvgPicture.asset(Assets.icons.back.path),
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
],
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
|
|
child: Center(child: SvgPicture.asset(Assets.images.logo.path)),
|
|
),
|
|
const SizedBox(height: 24),
|
|
const Padding(
|
|
padding: EdgeInsets.fromLTRB(25, 0, 25, 20),
|
|
child: Text(
|
|
"what do you like to be called in this application?",
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: Color.fromARGB(255, 117, 117, 117),
|
|
),
|
|
),
|
|
),
|
|
const Padding(
|
|
padding: EdgeInsets.fromLTRB(25, 0, 25, 0),
|
|
child: TextField(
|
|
decoration: InputDecoration(
|
|
counterText: '',
|
|
hintText: "Enter here...",
|
|
hintStyle: TextStyle(fontWeight: FontWeight.w500, color: Colors.grey),
|
|
filled: true,
|
|
fillColor: Color.fromARGB(133, 250, 250, 250),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
borderSide: BorderSide(color: Color.fromARGB(255, 14, 63, 102)),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
borderSide: BorderSide(color: Colors.grey, width: 2),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
const Padding(
|
|
padding: EdgeInsets.fromLTRB(25, 0, 25, 10),
|
|
child: Text(
|
|
"Gender",
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: Color.fromARGB(255, 117, 117, 117),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 25),
|
|
child: Wrap(
|
|
spacing: 10,
|
|
children: [
|
|
ChoiceChip(
|
|
label: const Text("Male"),
|
|
selected: selectedGender == "Male",
|
|
onSelected: (_) => setState(() => selectedGender = "Male"),
|
|
),
|
|
ChoiceChip(
|
|
label: const Text("Female"),
|
|
selected: selectedGender == "Female",
|
|
onSelected: (_) => setState(() => selectedGender = "Female"),
|
|
),
|
|
ChoiceChip(
|
|
label: const Text("Prefer not to say"),
|
|
selected: selectedGender == "Prefer not to say",
|
|
onSelected: (_) => setState(() => selectedGender = "Prefer not to say"),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
const Padding(
|
|
padding: EdgeInsets.fromLTRB(25, 0, 25, 15),
|
|
child: Text(
|
|
"Birth Date?",
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: Color.fromARGB(255, 117, 117, 117),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
|
|
child: TextField(
|
|
readOnly: true,
|
|
decoration: InputDecoration(
|
|
hintText: selectedDate != null
|
|
? "${selectedDate!.month}/${selectedDate!.day}/${selectedDate!.year}"
|
|
: "mm/dd/yyyy",
|
|
hintStyle: const TextStyle(fontWeight: FontWeight.w500, color: Colors.grey),
|
|
filled: true,
|
|
fillColor: const Color.fromARGB(133, 250, 250, 250),
|
|
enabledBorder: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
borderSide: BorderSide(color: Color.fromARGB(255, 14, 63, 102)),
|
|
),
|
|
focusedBorder: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(Radius.circular(12)),
|
|
borderSide: BorderSide(color: Colors.grey, width: 2),
|
|
),
|
|
suffixIcon: IconButton(
|
|
icon: SvgPicture.asset(Assets.icons.clander.path),
|
|
onPressed: () async {
|
|
final result = await showModalBottomSheet<DateTime>(
|
|
context: context,
|
|
builder: (_) => const _DatePickerSheet(),
|
|
);
|
|
if (result != null) {
|
|
setState(() {
|
|
selectedDate = result;
|
|
});
|
|
}
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: EdgeInsets.fromLTRB(25, 25, 25, 10),
|
|
child: Text(
|
|
"Interests / Preferences",
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: Color.fromARGB(255, 117, 117, 117),
|
|
),
|
|
),
|
|
),
|
|
Interests(icon: Assets.icons.shoppingCart.path,title: "Shopping & Retail",options: ["Fashion & Clothing","Electronics & Gadgets","Shoes & Accessories"],),
|
|
SizedBox(height: 30,),
|
|
Center(child: SizedBox(
|
|
width: 300,
|
|
child: LogInButton(text: "Submit", onPressed:() {
|
|
Navigator.push(context, MaterialPageRoute(builder:
|
|
(context) => Nearby(),
|
|
));
|
|
},))),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
class _DatePickerSheet extends StatefulWidget {
|
|
const _DatePickerSheet();
|
|
|
|
@override
|
|
State<_DatePickerSheet> createState() => _DatePickerSheetState();
|
|
}
|
|
|
|
class _DatePickerSheetState extends State<_DatePickerSheet> {
|
|
late DateTime now;
|
|
late int selectedYear;
|
|
late int selectedMonth;
|
|
int? selectedDay;
|
|
|
|
late final List<int> years;
|
|
|
|
final List<String> months = [
|
|
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
|
];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
now = DateTime.now();
|
|
selectedYear = now.year;
|
|
selectedMonth = now.month;
|
|
years = List.generate(100, (index) => now.year - index);
|
|
}
|
|
|
|
List<DateTime?> getCalendarDays() {
|
|
final firstDayOfMonth = DateTime(selectedYear, selectedMonth, 1);
|
|
final lastDayOfMonth = DateTime(selectedYear, selectedMonth + 1, 0);
|
|
final daysInMonth = lastDayOfMonth.day;
|
|
|
|
List<DateTime?> days = [];
|
|
|
|
// Add empty days for alignment
|
|
for (int i = 0; i < firstDayOfMonth.weekday - 1; i++) {
|
|
days.add(null);
|
|
}
|
|
|
|
// Add actual days
|
|
for (int day = 1; day <= daysInMonth; day++) {
|
|
days.add(DateTime(selectedYear, selectedMonth, day));
|
|
}
|
|
|
|
return days;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final days = getCalendarDays();
|
|
final weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
constraints: BoxConstraints(
|
|
maxHeight: MediaQuery.of(context).size.height * 0.7,
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Month and year selection
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
// Month selection
|
|
SizedBox(
|
|
width: 200,
|
|
child: DropdownButton<int>(
|
|
value: selectedMonth,
|
|
isExpanded: true,
|
|
items: List.generate(12, (index) {
|
|
return DropdownMenuItem(
|
|
value: index + 1,
|
|
child: Text(months[index]),
|
|
);
|
|
}),
|
|
onChanged: (value) {
|
|
setState(() {
|
|
selectedMonth = value!;
|
|
selectedDay = null;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
|
|
// Year selection
|
|
SizedBox(
|
|
width: 120,
|
|
child: DropdownButton<int>(
|
|
value: selectedYear,
|
|
isExpanded: true,
|
|
items: years.map((year) {
|
|
return DropdownMenuItem(
|
|
value: year,
|
|
child: Text(year.toString()),
|
|
);
|
|
}).toList(),
|
|
onChanged: (value) {
|
|
setState(() {
|
|
selectedYear = value!;
|
|
selectedDay = null;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 16),
|
|
|
|
// Weekday headers
|
|
Row(
|
|
children: weekdays.map((day) {
|
|
return Expanded(
|
|
child: Center(
|
|
child: Text(
|
|
day,
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
|
|
const SizedBox(height: 8),
|
|
|
|
// Calendar grid
|
|
Expanded(
|
|
child: GridView.count(
|
|
crossAxisCount: 7,
|
|
shrinkWrap: true,
|
|
children: days.map((date) {
|
|
return date == null
|
|
? const SizedBox.shrink()
|
|
: InkWell(
|
|
onTap: () => setState(() => selectedDay = date.day),
|
|
child: Container(
|
|
margin: const EdgeInsets.all(4),
|
|
decoration: BoxDecoration(
|
|
color: selectedDay == date.day
|
|
? Colors.blue
|
|
: Colors.transparent,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
date.day.toString(),
|
|
style: TextStyle(
|
|
color: selectedDay == date.day
|
|
? Colors.white
|
|
: Colors.black,
|
|
fontWeight: selectedDay == date.day
|
|
? FontWeight.bold
|
|
: FontWeight.normal,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 16),
|
|
|
|
// Confirm button
|
|
ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
minimumSize: const Size(double.infinity, 50),
|
|
backgroundColor: Colors.blue,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
onPressed: () {
|
|
if (selectedDay != null) {
|
|
Navigator.pop(
|
|
context,
|
|
DateTime(selectedYear, selectedMonth, selectedDay!),
|
|
);
|
|
}
|
|
},
|
|
child: const Text(
|
|
"Confirm",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
} |