flutter text field value from API resetting on keyboard close - android

I have implemented BLOC architecture for a user profile edit for a logged in user in flutter. The inputs are filled with user's existing info which I got from the API. But whenever input is focused and keyboard closes the entered value gets replaced with the initial value which I got from the API response.
This is my View profile UI
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:payd/services/profile_service.dart';
import 'package:payd/bloc/profile_bloc.dart';
import 'package:payd/model/profile_model.dart';
void main() {
runApp(EditProfile());
}
class EditProfile extends StatefulWidget {
#override
_EditProfilesState createState() => _EditProfilesState();
}
class _EditProfilesState extends State<EditProfile>
with AutomaticKeepAliveClientMixin {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Image.asset('assets/logo.png', fit: BoxFit.cover),
actions: [
IconButton(
onPressed: () {},
icon: Image.asset('assets/Icon feather-bell.png'),
iconSize: 30,
),
],
elevation: 5,
),
backgroundColor: Color(0xFF33138C),
body: BlocProvider(
create: (context) => ProfileBloc(ProfileService()),
child: Body(),
),
);
}
#override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
class Body extends StatelessWidget {
static final _formKey = GlobalKey<FormState>();
void _submit() {
final isValid = _formKey.currentState.validate();
if (!isValid) {
return;
}
_formKey.currentState.save();
}
#override
Widget build(BuildContext context) {
final textFieldFocusNode = FocusNode();
final profileBloc = BlocProvider.of<ProfileBloc>(context);
var userSlug = '52q6x93k4y';
profileBloc.add(FetchProfile(userSlug));
Size size = MediaQuery.of(context).size;
return Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: new ExactAssetImage('assets/app-background.png'),
fit: BoxFit.cover)),
child: Padding(
padding: const EdgeInsets.all(0),
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Column(
children: <Widget>[
SizedBox(
height: size.height,
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: size.height * 0.04),
// height: 400,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0),
topRight: Radius.circular(40.0),
),
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Column(
children: [
Container(
padding: EdgeInsets.only(
top: 30.0,
left: 20.0, bottom: 25.0),
alignment: Alignment.centerLeft,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.keyboard_arrow_left),
iconSize: 30,
),
),
],
),
Column(
children: [
Container(
padding: EdgeInsets.only(
top: 30.0,
right: 30.0, bottom: 25.0),
alignment: Alignment.centerLeft,
child: Text(
'Edit Account',
style: const TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.w600,
color: Colors.black54),
),
),
],
),
],
),
BlocBuilder<ProfileBloc, ProfileState>(
builder: (context, state) {
print(state);
if (state is ProfileIsLoaded) {
return Container(
child: Flexible(
child: SingleChildScrollView(
reverse: true,
padding:
EdgeInsets.only(left: 16, right: 16),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(
bottom:
size.height > 700
? 20
: 15),
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
bottom: 25.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
controller: TextEditingController(
text: state.getProfile.firstName),
decoration: InputDecoration(
labelText: 'First Name'),
keyboardType: TextInputType
.name,
onFieldSubmitted: (
value) {
//Validator
},
validator: (value) {
if (value.isEmpty) {
return 'Required';
}
return null;
},
),
//box styling
SizedBox(
height: MediaQuery
.of(context)
.size
.width *
0.1,
),
TextFormField(
controller: TextEditingController(
text: state.getProfile.lastName),
decoration: InputDecoration(
labelText: 'Last Name'),
keyboardType: TextInputType
.name,
onFieldSubmitted: (
value) {
//Validator
},
validator: (value) {
if (value.isEmpty) {
return 'Required';
}
return null;
},
),
//box styling
SizedBox(
height: MediaQuery
.of(context)
.size
.width *
0.1,
),
SizedBox(
width: double.infinity,
child: TextButton(
style: ButtonStyle(
padding: MaterialStateProperty
.all(
EdgeInsets.only(
top: 16.0,
bottom: 16.0),),
foregroundColor:
MaterialStateProperty
.all<Color>(
Colors.white),
backgroundColor: MaterialStateProperty
.all<Color>(
Color(
0xFF33138C)),
shape: MaterialStateProperty
.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius
.circular(
25.0),
side: BorderSide(
color: Color(
0xFF33138C)))),),
onPressed: () =>
_submit(),
child: Text('Save',
style: TextStyle(
fontSize: 16.0
),),
),
),
],
),
),
),
],
),
),
),
);
} else {
return Center(child : CircularProgressIndicator());
}
}
),
SizedBox(height: 150),
],
)),
],
))
],
),
),
),
);
}
}
class ProfileError extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Image.asset('assets/empty-list.png')],
),
Text(
'Error',
style: const TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black87),
),
Padding(
padding: EdgeInsets.only(left: 30.0, right: 30.0),
child: Text(
'After your first order you\'ll be able to view it here',
style: const TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey,
),
textAlign: TextAlign.center,
),
),
],
),
);
}
}

Related

flutter bottomNavigationBar: BottomAppBar In IPhone it can't full fill, from bottom screen

in android it is sowing perfect,but iphone it not full fill from bottom.
please check bottom:bottomNavigationBar section code........
**flutter bottomNavigationBar: BottomAppBar In IPhone it can't full fill, from bottom **
my code is
import 'package:country_pickers/country.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:country_pickers/country_pickers.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../authentication/presentation/views/otp_login_verifecation.dart';
class homeScreen extends StatefulWidget {
const homeScreen({
Key? key,
}) : super(key: key);
#override
State<homeScreen> createState() => _MyhomeScreen();
}
class _MyhomeScreen extends State<homeScreen> {
Country _selectedFilteredDialogCountry =
CountryPickerUtils.getCountryByPhoneCode('91');
TextEditingController _phone = TextEditingController();
#override
Widget build(BuildContext context) {
ScreenUtil.init(context, designSize: const Size(360, 800));
var platform = Theme.of(context).platform;
final screenW = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(35),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(46),
height: ScreenUtil().setHeight(46),
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: AssetImage("assets/profile/profile.png"),
fit: BoxFit.fitHeight,
),
borderRadius: BorderRadius.all(Radius.circular(50.0)),
border: Border.all(
color: Colors.greenAccent,
width: 2.0.w,
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(30),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(81),
height: ScreenUtil().setHeight(45),
child: RichText(
text: TextSpan(
text: 'Vishal\n',
style: TextStyle(
fontSize: 24.sp,
color: Color(0xff480377),
fontWeight: FontWeight.w700,
fontFamily: "roboto"),
children: <TextSpan>[
TextSpan(
text: 'Global Rank: ',
style: TextStyle(
color: Color(0xff480377).withOpacity(0.30.sp),
fontSize: 12,
fontFamily: "roboto",
),
),
TextSpan(
text: '21',
style: TextStyle(
fontWeight: FontWeight.w100,
fontSize: 12.sp)),
],
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(45),
left: ScreenUtil().setWidth(145),
),
width: ScreenUtil().setWidth(30),
height: ScreenUtil().setHeight(30),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/home/menu-vector.png"),
fit: BoxFit.fill,
),
),
),
],
),
],
),
],
),
//bottom:bottomNavigationBar ---------------------------------------------------
bottomNavigationBar: BottomAppBar(
child: Container(
// margin: EdgeInsets.only(top:ScreenUtil().setHeight(60),),
height: ScreenUtil().setHeight(51),
// width: ScreenUtil().setWidth(365),
color: Color(0xFFEFEFEF),
child: Row(
// mainAxisSize: MainAxisSize.max,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5),),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) =>
OtpLoginVerifecation(phone: _phone.text, country_code: _selectedFilteredDialogCountry.phoneCode,)));
},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-home.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-shopping-cart.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-credit-card.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
FlatButton(
padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/TBD.png"),size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
]
),
)
),
);
}
}
in android it is sowing perfect,but iphone it not full fill from bottom.
please check bottom:bottomNavigationBar section code........
flutter bottomNavigationBar: BottomAppBar In IPhone it can't full fill, from button

The BottomAppBar has a safe area by default. You may probably use BottomNavigationBar or create your custom widget. Check the code below.. That's what bottomAppBar will return
PhysicalShape(
clipper: clipper,
elevation: elevation,
color: effectiveColor,
clipBehavior: widget.clipBehavior,
child: Material(
key: materialKey,
type: MaterialType.transparency,
child: widget.child == null
? null
: SafeArea(child: widget.child!),//safe area is here
),
)

Not the exact answer for the issue, but setting backgroundColor in Scaffold to same as in BottomAppBar and then setting elevation in BottomAppBar to zero, gives an impression that BottomAppBar extends to bottom.

I Will Solve It. create custom NavBar method
import 'package:country_pickers/country.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:country_pickers/country_pickers.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../authentication/presentation/views/otp_login_verifecation.dart';
class homeScreen extends StatefulWidget {
const homeScreen({
Key? key,
}) : super(key: key);
#override
State<homeScreen> createState() => _MyhomeScreen();
}
class _MyhomeScreen extends State<homeScreen> {
Country _selectedFilteredDialogCountry =
CountryPickerUtils.getCountryByPhoneCode('91');
TextEditingController _phone = TextEditingController();
#override
Widget build(BuildContext context) {
ScreenUtil.init(context, designSize: const Size(360, 800));
var platform = Theme.of(context).platform;
final screenW = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(35),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(46),
height: ScreenUtil().setHeight(46),
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: AssetImage("assets/profile/profile.png"),
fit: BoxFit.fitHeight,
),
borderRadius: BorderRadius.all(Radius.circular(50.0)),
border: Border.all(
color: Colors.greenAccent,
width: 2.0.w,
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(30),
left: ScreenUtil().setWidth(12),
),
width: ScreenUtil().setWidth(81),
height: ScreenUtil().setHeight(45),
child: RichText(
text: TextSpan(
text: 'Vishal\n',
style: TextStyle(
fontSize: 24.sp,
color: Color(0xff480377),
fontWeight: FontWeight.w700,
fontFamily: "roboto"),
children: <TextSpan>[
TextSpan(
text: 'Global Rank: ',
style: TextStyle(
color: Color(0xff480377).withOpacity(0.30.sp),
fontSize: 12,
fontFamily: "roboto",
),
),
TextSpan(
text: '21',
style: TextStyle(
fontWeight: FontWeight.w100,
fontSize: 12.sp)),
],
),
),
),
Container(
margin: EdgeInsets.only(
top: ScreenUtil().setHeight(45),
left: ScreenUtil().setWidth(145),
),
width: ScreenUtil().setWidth(30),
height: ScreenUtil().setHeight(30),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/home/menu-vector.png"),
fit: BoxFit.fill,
),
),
),
],
),
],
),
],
),
//bottom:bottomNavigationBar ---------------------------------------------------
bottomNavigationBar: buildMyNavBar(context),
);
}
Container buildMyNavBar(BuildContext context) {
return Container(
height: 60.h,
decoration: const BoxDecoration(
color: Color(0xFFEFEFEF),
// borderRadius: const BorderRadius.only(
// topLeft: Radius.circular(20),
// topRight: Radius.circular(20),
// ),
),
child: Row(
// mainAxisSize: MainAxisSize.max,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
padding: EdgeInsets.only(
top: ScreenUtil().setHeight(5),
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OtpLoginVerifecation(
phone: _phone.text,
country_code:
_selectedFilteredDialogCountry.phoneCode,
)));
},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-home.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(
color: Color(0xFF000000).withOpacity(0.10.sp),
width: 1.w,
),
FlatButton(
padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-shopping-cart.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(
color: Color(0xFF000000).withOpacity(0.10.sp),
width: 1.w,
),
FlatButton(
padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/fi-sr-credit-card.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
Container(
color: Color(0xFF000000).withOpacity(0.10.sp),
width: 1.w,
),
FlatButton(
padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
onPressed: () {},
child: Column(
children: <Widget>[
ImageIcon(
AssetImage("assets/home/TBD.png"),
size: 40.sp,
color: Color(0xFF6500DF),
),
// Icon(Icons.home),
// Text('Home')
],
),
),
]),
);
}
}

Using carousel slider with page view

I am using carousal slider with page view but when I am sliding the images in scroll view it is sliding to me to next page instead of next image. I just want to slide images when I slide on image and i want to slide to the next page when i slide below the image. but now wherever i slide on the screen it take me to the next page.
This is my page view.
import 'package:bartermade/controllers/profileController.dart';
import 'package:bartermade/models/tradeModel.dart';
import 'package:bartermade/widgets/profileView.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../screens/home/bottomBarViews/homeView/categoriesDetailScreen.dart';
class PageViewHolder extends StatelessWidget {
final PageController pageController = PageController(
initialPage: 0,
);
ProfileController _profileController = Get.find();
final String reciverId;
final String currentUserId;
final TradeModel catData;
PageViewHolder(
{required this.reciverId,
required this.currentUserId,
required this.catData});
var followersList = ['Ali', 'Hussain', 'Hassan', 'Akhtar'];
#override
Widget build(BuildContext context) {
// print("cat ID " + "${catData.user.id}");
// print("profile ID " + "${_profileController.profileId}");
return Scaffold(
body: PageView(
// physics: catData.user.id != _profileController.profileId.value
// ? AlwaysScrollableScrollPhysics()
// : NeverScrollableScrollPhysics(),
physics: ClampingScrollPhysics(),
pageSnapping: false,
onPageChanged: (index) {
},
controller: pageController,
children: [
//first screen in page view
TradeDetailScreen(
catData: catData,
currentUserId: currentUserId,
reciverId: reciverId,
),
//second screen here
ProfileView(
firstName: catData.user.firstName,
lastName: catData.user.lastName,
followers: followersList,
profileUrl: catData.user.profilePictureUrl,
screenState: true,
),
],
),
);
}
}
And this is my screen page
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) => SafeArea(
child: SingleChildScrollView(
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
Get.back();
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.grey,
)),
Container(
clipBehavior: Clip.antiAlias,
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: '${widget.profileUrl}',
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
SizedBox(
width: 7,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"${widget.lastName ?? " " "${widget.firstName ?? " "}"}",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
2),
),
widget.catData["user"] ==
profileController.userId.value
? Container(
height: 0,
width: 0,
)
: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Follow',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20)))),
],
),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'4.3',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
1.8),
),
Icon(
Icons.star,
size: 15,
color: Colors.yellow,
),
],
),
],
),
)
],
),
),
Column(
children: [
widget.catData["pictures"] == [] ||
widget.catData["pictures"].length == 0 ||
widget.catData["pictures"].isEmpty ||
widget.catData["pictures"] == null
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
child: Center(child: Text(" No Image to show")))
: Stack(
children: [
CarouselSlider(
items: widget.catData["tradeWithPictures"]
.map<Widget>((e) {
return Container(
width: Get.width,
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: e['url'],
placeholder: (context, url) => Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
);
}).toList(),
carouselController:
postController.carouselController,
options: CarouselOptions(
autoPlay: true,
enableInfiniteScroll: true,
height: Get.height * .7,
viewportFraction: 1.0,
enlargeCenterPage: false,
aspectRatio: 1 / 1.3,
onPageChanged: (index, reason) {
// postController.tradeImagesIndex(index);
// postController.carouselController.nextPage();
},
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.3,
bottom:
MediaQuery.of(context).size.height * 0.3,
left: 0,
right: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10),
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: Icon(Icons.arrow_back_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.previousPage();
},
),
ElevatedButton(
child: Icon(Icons.arrow_forward_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.nextPage();
},
),
],
),
),
),
],
),
SizedBox(
height: 10,
),
],
),
Container(
margin: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.catData["title"],
style: TextStyle(
color: AppColors.detailTextsColor,
fontWeight: FontWeight.bold),
),
profileController.userId == widget.catData["user"]
? Container(
height: 0,
width: 0,
)
: InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Offer Trade',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
],

Can we group or filter data inside our hive boxes

I use hive to store my data locally in expense tracker app. I have saved all expenses in a box called expenseBox. I have given each expense item a date and I want items with the same date to be grouped together and displayed separately. Is there a way to achieve this?
Thanks for your help!
BTW this is the code for my homescreen where I display the items.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:flutter_locales/flutter_locales.dart';
import '/models/expense.dart';
import '/widgets/expense_list_tile.dart';
import '/screens/add_expense_screen.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
static const routeName = '/home_page';
#override
_HomeScreenState createState() => _HomeScreenState();
}
enum SlidableAction {
edit,
delete,
}
class _HomeScreenState extends State<HomeScreen> {
late Box expenseBox;
late Box pocketBox;
bool isFabVisible = true;
#override
void initState() {
expenseBox = Hive.box<Expense>('expenses');
pocketBox = Hive.box<int>('pocket');
super.initState();
}
#override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: Hive.box<int>('pocket').listenable(),
builder: (context, Box<int> pocketBox, child) => Scaffold(
appBar: AppBar(
title: const LocaleText('appName'),
elevation: 0,
centerTitle: true,
),
body: NestedScrollView(
headerSliverBuilder: (context, _) => [
SliverAppBar(
expandedHeight: MediaQuery.of(context).size.height * 0.15,
flexibleSpace: FlexibleSpaceBar(
background: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'appName',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('budget') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'income',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('totalIncome') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'expense',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('totalExpense') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
],
),
),
Expanded(child: Container()),
],
),
),
),
),
],
body: ValueListenableBuilder(
valueListenable: Hive.box<Expense>('expenses').listenable(),
builder: (context, Box<Expense> expensesBox, child) {
return NotificationListener<UserScrollNotification>(
onNotification: (notification) {
if (notification.direction == ScrollDirection.forward) {
if (!isFabVisible) setState(() => isFabVisible = true);
} else if (notification.direction ==
ScrollDirection.reverse) {
if (isFabVisible) setState(() => isFabVisible = false);
}
return true;
},
child: Scrollbar(
thickness: 5,
interactive: true,
child: ListView.separated(
separatorBuilder: (context, index) {
return const SizedBox();
},
itemCount: expenseBox.length,
itemBuilder: (context, index) {
final expense = expenseBox.getAt(index);
return ExpenseListTile(index: index, expense: expense);
},
),
),
);
},
),
),
floatingActionButton: isFabVisible
? FloatingActionButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => const AddExpenseScreen(
index: -1,
),
));
},
child: const Icon(Icons.add),
)
: null,
),
);
}
}

You can try this code.
import 'package:flutter/material.dart';
import 'package:sticky_grouped_list/sticky_grouped_list.dart';
class MyMissionList extends StatefulWidget {
#override
State<MyMissionList> createState() => _MyMissionListState();
}
class _MyMissionListState extends State<MyMissionList> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: Container(
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
// AppColors.blue,
borderRadius: BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Material(
color: AppColors.baseLightBlueColor,
elevation: 15,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Column(
children: [
AppBar(
backgroundColor: AppColors.baseLightBlueColor,
elevation: 0.0,
actions: [
Container(
padding: EdgeInsets.only(right: 20),
child: Image.asset(
"assets/Vector-2.png",
height: 5,
width: 22,
color: Colors.white,
)),
],
),
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 20),
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello User123,",
style:
TextStyle(color: AppColors.white, fontSize: 15),
),
SizedBox(height: 10),
Text(
AppStrings.totalAmount,
// "Montant total :",
style:
TextStyle(color: AppColors.white, fontSize: 11),
),
Text(
"592,30 €",
style:
TextStyle(color: AppColors.white, fontSize: 25),
),
],
),
)
],
),
),
)),
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(left:15.0,right: 15,top: 15),
child: Text("My Mission",style: TextStyle(
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
),
Expanded(
child: StickyGroupedListView<Element, DateTime>(
elements: elements,
order: StickyGroupedListOrder.ASC,
groupBy: (Element element) =>
DateTime(element.date.year, element.date.month, element.date.day),
groupComparator: (DateTime value1, DateTime value2) =>
value2.compareTo(value1),
itemComparator: (Element element1, Element element2) =>
element1.date.compareTo(element2.date),
floatingHeader: false,
groupSeparatorBuilder: (Element element) => Container(
height: 50,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 220,
padding: EdgeInsets.only(left: 20,top: 20,bottom: 10),
child: Text(
'${element.heading}',
textAlign: TextAlign.start,
style: TextStyle(color: Color(0xff919AAA)),
),
),
],
),
),
itemBuilder: (_, Element element) {
return element.type
? GestureDetector(
onTap: () {
// Navigator.push(context, MaterialPageRoute(builder: (context)=> WaitingForValidation()));
},
child: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle +
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
elevation: 15.0,
shadowColor: Colors.blue[100],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20.0))),
child: Container(
height: 30,
width: 80,
decoration: BoxDecoration(
// boxShadow: [BoxShadow(color: AppColors.grey, blurRadius: 20.0)],
borderRadius:
BorderRadius.circular(20.0),
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.blue.shade900,
],
)),
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
),
),
],
),
),
),
)
: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle +
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top:5.0,bottom: 5),
child: Container(
height: 30,
width: 95,
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: AppColors.green,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
)
],
),
),
);
},
),
),
],
),
);
}
}
class Element {
bool type;
DateTime date;
String hotelName;
String subTitle;
String heading;
String buttonText;
Element(this.date, this.type, this.hotelName, this.subTitle, this.heading,
this.buttonText);
}
List<Element> elements = <Element>[
Element(
DateTime(2020, 7, 22),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
/**/
"Terminate",
),
Element(
DateTime(2021, 12, 12),
true,
"Visite entrepot Villabe ",
"Mercredi",
"To Plan",
"To Plan",
),
];

http request stop when i made build release flutter

I have a problem with my application,
when I make run in the emulator everything works well.
just when I made build apk, the application stops to get data from API URL, I tried it with debug version and everything works well.
so the problem with release version.
for sure I have internet permission in the Android manifest file.
I'm working with package:dio/dio.dart for HTTP request
Dart Code
import 'package:caro_app/restaurant.dart';
import 'package:caro_app/screens/FadeAnimation.dart';
import 'package:caro_app/screens/restaurant.dart';
import 'package:dio/dio.dart' as http_dio;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'card.dart';
class HomePageApp extends StatefulWidget {
#override
_HomePageAppState createState() => _HomePageAppState();
}
class _HomePageAppState extends State<HomePageApp> {
Future<List<Restaurant>> _getRestaurantDio() async {
http_dio.Dio dio = http_dio.Dio();
http_dio.Response response = await dio
.get("myurl");
List data = response.data;
return data.map((e) => Restaurant.fromJson(e)).toList();
}
List<Food> food = [];
int sum = 0;
bool isDone = false;
List<Restaurant> allRestaurant = [];
#override
void initState() {
super.initState();
getData();
}
getData() async {
allRestaurant = await _getRestaurantDio();
isDone = true;
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: Container(
child: Icon(
Icons.menu,
color: Colors.orange,
),
),
title: Text(
"Bogota",
style: TextStyle(color: Colors.white, fontSize: 25),
),
brightness: Brightness.light,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.orange,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.orange,
),
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => CartScreen());
Navigator.push(context, route);
},
)
],
),
body: Stack(
children: <Widget>[
Container(
child: Container(
height: 40,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1,
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(
"All",
style:
TextStyle(fontSize: 20, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.1,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Shaorma",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.2,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Falafel",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.3,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Burger",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.4,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Pizza",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
],
),
),
),
Container(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.only(
left: 8.0, right: 8.0, top: 75.0, bottom: 0.0),
child: FutureBuilder(
future: _getRestaurantDio(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
print(snapshot.data);
if (snapshot.data == null) {
return Container(
child: Center(
child: Text('Loading..',style: TextStyle(color:Colors.white),),
),
);
} else {
List<Restaurant> restaurant = snapshot.data;
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => ItemScreen(
user: restaurant[index],
valueSetter: (selectedProducts) {
setState(() {
restaurant
.add(snapshot.data[index]);
sum = 0;
food.forEach((item) {
sum = sum + item.price;
print(sum);
});
});
})));
},
child: FadeAnimation(
1,
Container(
// height: 250,
width: double.infinity,
padding: EdgeInsets.all(20),
margin: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image:
NetworkImage(restaurant[index].img),
fit: BoxFit.cover),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1,
Text(
restaurant[index].name,
style: TextStyle(
color: Colors.orange,
fontSize: 30,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
FadeAnimation(
1.1,
Container(
padding:
EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.orange,
borderRadius:
BorderRadius
.circular(
20)),
child: Text(
restaurant[index]
.family,
style: TextStyle(
color: Colors.white,
fontSize: 20),
))),
],
),
),
FadeAnimation(
1.2,
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange),
child: Center(
child: Icon(
Icons.favorite_border,
size: 20,
color: Colors.white,
),
),
))
],
),
FadeAnimation(
1.2,
Container(
child: Container(
padding: EdgeInsets.all(9),
width: 200,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius:
BorderRadius.circular(20)),
child: Row(
children: <Widget>[
Icon(Icons.location_on),
SizedBox(
width: 10,
),
Text(
restaurant[index].city,
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight:
FontWeight.bold),
),
],
),
))),
],
),
),
),
),
);
},
);
}
},
),
),
),
],
),
);
}
}
class User {
final String name;
final String family;
final String city;
final String img;
List<String> food;
User(this.name, this.family, this.city, this.img);
}

add internet permission to Manifest file inside the android folder and make true the uses-clear-text-traffic if you get data from non https address;
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>

Flutter: Unable to make the Form scroll when the Keyboard is open

In my application, I am using a stack and a container. Within the container i have a form and its fields. Below is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Login extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: LoginUI(),
);
}
}
class LoginUI extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return LoginState();
}
}
class LoginState extends State<LoginUI> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Container(
height: double.infinity,
width: double.infinity,
child:
Stack(
fit: StackFit.loose,
children: <Widget>[
SafeArea(
child: Container(
margin: EdgeInsets.only(top: 25),
child: Image.asset("assets/images/login_image.png"),
),
),
Positioned(
top: 275,
child: Container(
height: 600,
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
margin:
EdgeInsets.only(top: 20, left: 10, right: 10),
child: Image.asset(
"assets/images/logo_2.png"),
),
)
],
),
Form(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 40,
),
child: SizedBox(
width: MediaQuery.of(context).size.width * .90,
height: 36,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Phone",
),
),
)),
Container(
margin: EdgeInsets.only(
top: 15,
),
child: SizedBox(
height: 36,
width: MediaQuery.of(context).size.width * .90,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Password",
),
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
margin: EdgeInsets.only(
top: 1, left: 10, right: 10),
child: FlatButton(
onPressed: () {},
child: Text("Forgot Password?",
style: TextStyle(
fontFamily: 'Roboto-Medium',
fontSize: 14.0,
letterSpacing: 1.25,
color:
Color.fromRGBO(75, 56, 137, 80))),
)),
),
Container(
margin:
EdgeInsets.only(top: 1, left: 10, right: 10),
child: SizedBox(
width: MediaQuery.of(context).size.width * .90,
child: RaisedButton(
color: Color.fromRGBO(75, 56, 137, 80),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(18.0),
side: BorderSide(
color:
Color.fromRGBO(75, 56, 137, 80))),
child: Text(
"LOGIN",
style: Theme.of(context).textTheme.button,
),
onPressed: () {
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(
content:
Text('Processing Data')));
}
},
),
))
],
),
),
Container(
margin: EdgeInsets.only(top: 1, left: 10, right: 10),
child: FlatButton(
onPressed: () {},
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Not a member yet? ",
style: TextStyle(fontFamily: 'Roboto-Regular', fontSize: 14.0, letterSpacing: 0.25, color:Color.fromRGBO(75, 56, 137, 80 )),
),
TextSpan(
text: "Create an Account",
style: TextStyle(decoration: TextDecoration.underline, fontFamily: 'Roboto-Regular', fontSize: 14.0, letterSpacing: 0.25, color:Color.fromRGBO(75, 56, 137, 80 ),
),)
]),
),
)),
],
),
),
),
],
)
//child: Image.asset("assets/images/login_image.png"),
);
}
Widget _buildForm() {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: ImageIcon(
AssetImage("assets/images/email_24px.png"),
color: Colors.white,
),
margin: EdgeInsets.only(right: 5, bottom: 30)),
),
Flexible(
flex: 7,
child: SizedBox(
height: 80,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Email",
),
),
))
],
),
Container(
margin: EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: ImageIcon(
AssetImage("assets/images/lock_24px.png"),
color: Colors.white,
),
margin: EdgeInsets.only(right: 5, bottom: 30),
),
),
Flexible(
flex: 7,
child: SizedBox(
height: 80,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Password",
),
),
))
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text(
"Forgot Password?",
style: Theme.of(context).textTheme.body1,
),
onPressed: () {},
),
],
),
),
Container(
margin: EdgeInsets.only(top: 40, left: 25, right: 10, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: SizedBox(
width: double.infinity,
height: 45,
child: RaisedButton(
color: Color.fromRGBO(0, 72, 128, 100),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side:
BorderSide(color: Color.fromRGBO(0, 72, 128, 100))),
child: Text(
"LOGIN",
style: Theme.of(context).textTheme.button,
),
onPressed: () {
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
),
))
],
),
)
],
),
);
}
#override
void initState() {
// TODO: implement initState
super.initState();
}
}
My view is as follows
when the keyboard is open, the user must close it to access the login button. This is because this cannot be scrolled. I tried adding SingleScrollView and ListView below the main image and wrap the rest with it, but that didnt work. It only made the content disappear.
How can i make sure the fORM section is scrollable?

You can wrap your whole widget with SingleChildScrollView and then ConstrainedBox as follows:
Scaffold(
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: Container(
child: yourWidget()
You can see the related answer here: https://stackoverflow.com/a/59783374/12709039

Categories

Resources