Flutter - Scroll with a fixed widget - flutter

I would like to do a scroll that the map part fixed on top, once i scroll up those widget can be overlay on top of the map.
i tried to do the scroll effect.
i use a stack with one container(the map) and one SingleChildScroll.
but the map is not able to tap after i put the SingleChildScroll on top of the map.
So is there any ways to made this out?
Any suggestions that i can do this design?
Thanks a lot!
This is the normal view
after i scroll up little bit
here is the code
return Scaffold(
key: _scaffoldKey,
backgroundColor: ThemeColors.orangeYellow,
floatingActionButton: Padding(
padding: EdgeInsets.only(right: 30),
child: Row(
children: [
_profileButton,
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
body: Stack(
children: [
Positioned(
top: 0,
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Container(),
_map,
_nearbyRestaurantBox,
_getCurrentLocationButton,
],
),
),
SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(
children: <Widget>[
Column(
// alignment: Alignment.bottomCenter,
// overflow: Overflow.visible,
children: <Widget>[
// Container(),
// _map,
Padding(
padding: EdgeInsets.only(top: _mapHeight - 70),
),
Stack(
children: [
Column(
children: [
SizedBox(
height: 70,
// child: Container(
// // color: Colors.green,
// ),
),
SizedBox(
height: 70,
child: Container(
color: Colors.amber,
),
)
],
),
// Padding(
// padding: EdgeInsets.only(top: 35),
// ),
Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.only(top: 5),
child: _searchBox,
),
)
],
),
// Positioned(top: 0, child: _map),
// _searchBox,
// _nearbyRestaurantBox,
// _getCurrentLocationButton,
],
),
Container(
color: ThemeColors.orangeYellow,
child: Center(
child: Column(
children: <Widget>[
_categoryBox,
..._buildBanners(),
],
),
),
),
],
),
)
],
),
);

Related

Align children with first child in Column

How can I align my widget to take the same width as ClipRect image?
Right now it overflows in my screen. Find attached how it is and how I desire my output would be.
Is it possible to center it within the red lines I drew?
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Flexible(
child: Column(
children: <Widget>[
ColumnWithMainChild(
mainChildKey: mainChildKey,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
imgparam,
width: 350,
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'Good with children: $param_good_children',
),
GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
)
],
),
Divider(),
Text(
'Good with children: $param_good_children',
),
],
),
),
),
],
),
]));
}
}
Do the following Changes
Set Padding to Parent column
Set width of NetworkImage to double.infinity
Wrap your Progress Bar with Flexible
Code:
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Scaffold(
appBar: AppBar(),
body: Padding( // Set Padding to Paren
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
"https://images.unsplash.com/photo-1474922651267-219b23864ae8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
width: double.infinity, // Set width of NetworkImage to double.infinity
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
const Text(
'Good with children: 5',
),
Flexible( //Wrap your Progress Bar with Flexible
child: GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
),
)
],
),
const Divider(),
const Text(
'Good with children: 5',
),
],
),
),
),
]),
),
);
}
Output:

keypad hides my textformfield dart flutter is there any solution, it tried a lot nothing worked

here is my the wiget with form
Widget verticalList = new ListView(
shrinkWrap: true,
children: [
Container(
color:Colors.white,
width: MediaQuery.of(context).size.width,
child: Form(
key: _formKey,
child:Column(
// shrinkWrap: true,
mainAxisSize:MainAxisSize.min,
children: [
textformField(),
textformField(),
textformField(),
textformField(),
textformField(),
........
.........
],
),
),
),
],
);
here below scaffold part full code
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.center,
stops: [0.0,1,1.2],
colors: <Color>[
Color(0xff19879a),
Color(0xff000e11),
Color(0xff000e02),
],
),
),
child: Column(
children:[
Container(
height: 160,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(flex:3,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FittedBox(child: Text("Firm Details",style: GoogleFonts.lato(color: Color(0xfffbfbfb),fontSize: 1.8*SizeConfig.textMultiplier))),
SizedBox(height: 0.5*SizeConfig.heightMultiplier,),
Padding(
padding: const EdgeInsets.only(left:30.0),
child: Text(
"Please select the category that best describes your business model.",
textAlign: TextAlign.right,
style: GoogleFonts.lato(
color: Color(0xffb3fbfbfb),
fontSize: 1.5*SizeConfig.textMultiplier),
),
),
],
),
),
),
Expanded(
flex: 2,
child: Container(
width: 10.0*SizeConfig.widthMultiplier,
height: 10.0*SizeConfig.heightMultiplier,
child: Image.asset(
"assets/images/firmDetail.png",
width: 10.0*SizeConfig.widthMultiplier,
height: 10.0*SizeConfig.heightMultiplier,
),
),
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.only(topLeft:Radius.circular(30),topRight: Radius.circular(30))
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(flex:1,child: horizontalList1),
Expanded(flex:5,child:verticalList,),
],
),
),)
]
)
),
);
please help i tried a lot nothing worked ,
is there any problem with my code
please help i tried a lot nothing worked ,
is there any problem with my code
keypad hides my textformfield dart flutter is there any solution, it tried a lot nothing worked
Wrap everything in a SingleChildScrollView widget and you can scroll when the keyboard is displayed.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Title'),
),
body: SingleChildScrollView(
child: _buildPage(),
),
);}
If you want the keyboard to hide when the user scrolls then wrap it all with NotificationListener<ScrollUpdateNotification>.
body: NotificationListener<ScrollUpdateNotification>(
onNotification: (notification) {
// dismiss keyboard on scroll if user initiated the scroll (ie dragDetails != null)
if (notification.dragDetails != null) {
FocusScope.of(context).unfocus();
}
return true;
},
child: SingleChildScrollView(
child: _buildPage(),
),
);
Wrap the form with this padding:
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom
),
)

SingleChildScrollView is not Scrollable

I am trying to add SingleChildScrollView for the page but it appears to be not working, can't figure the reason. I am not getting any overflow errors as such but the Fitbutton is not visible on the screen. I tried searching on the net but didn't find any relevant solution.
This is the code snippet I tried:
return Scaffold(
body:SingleChildScrollView(
child: Form(
key:_formKey,
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Stack(
children: <Widget>[
Container(
decoration:( ...
),
)
),
Positioned(
top: MediaQuery.of(context).size.width * 0.10,
child: Container(
margin: EdgeInsets.all(13.0),
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Welcome",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 25.0),),
SizedBox(
height: 22,
),
Stack(
alignment: Alignment.centerLeft,
children: [
Container(
height:60.0,
padding: EdgeInsets.only(left: 53.0),
child: buildNameField()
),
CircleAvatar(
...
),
],
),
SizedBox(
height: 22.0,
),
Stack(
alignment: Alignment.centerLeft,
children: [
.....
],
),
SizedBox(
height: 10,
),
Stack(
alignment: Alignment.centerLeft,
children: [
...
],
),
SizedBox(height: 22),
FitButton(
....
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: _buildSignInButton(),
),
]
),
),
),],
),
),
),),
);
Any help would be great !!
Remove SingleChildScrollView from Form and
Wrap to Column may be solved.
Try wrapping the form in a sizedBox and then wrapping the sizedBox with the SingleChildScrollView

How to use ScrollView without messing the order of the actual layout?

I'm making a login screen, and from what I learned, I need to use SingleChildScrollView in order to prevent 'yellow-stripes' issues when TextFields are focused.
Whenever I add SingleChildScrollView, perhaps I lose any kind of widget alignment as MainAxisAlignment is not working anymore:
How is it looking like with SignleChildScrollView: Screenshot with SingleChildScrollView
How it should be looking like: Screenshot without SingleChildScrollView
I've tried anything but just can't figured it out.
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(bottom: 50),
child: TypeScript(textTypeScript: tsLogin),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
child: Column(
children: [
emailField,
SizedBox(height: 20),
passwordField,
Container(
height: 80,
padding: EdgeInsets.only(top: 10),
alignment: Alignment.topRight,
//child: passwordRecovery,
),
Container(
child: loginButton,
),
SizedBox(
height: 52,
width: MediaQuery.of(context).size.height; / 2,
child: orStripe,
),
Container(
padding: EdgeInsets.only(bottom: 10),
child: signButton,
),
],
),
),
],
),
),
),
);
}
}
Try to replace the SingleChildscrollview with the following:
CustomScrollView(
slivers[
SliverFillRemaining(
hasScrollBody: false,
child: YourChildWidget(),
),
),
)
I would suggest two things to you:
1 In Line4, try to change mainAxisAlignment.end inside Column to MainAxisAlignment.start
2 There's an error that i've pointed out in the code below.
Check these out and tell me if this resolves your problem?
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(bottom: 50),
child: TypeScript(textTypeScript: tsLogin),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
child: Column(
children: [
emailField,
SizedBox(height: 20),
passwordField,
Container(
height: 80,
padding: EdgeInsets.only(top: 10),
alignment: Alignment.topRight,
//child: passwordRecovery,
),
Container(
child: loginButton,
),
SizedBox(
height: 52,
width: MediaQuery.of(context).size.height / 2, //ERROR
child: orStripe,
),
Container(
padding: EdgeInsets.only(bottom: 10),
child: signButton,
),
],
),
),
],
),
),
),

How to set the background image instead of canvasColor for whole drawer?

Theme(
data: Theme.of(context).copyWith(
canvasColor: ColorPallete().lightBlack,
),
child: Drawer(
child: ListView(
children: <Widget>[Column(
children: <Widget>[
Container(
height: 204.0,
child: DrawerHeader(
child: Stack(
children:<Widget>[
Center(
child: Column(
children: <Widget>[
DottedBorder(
padding: EdgeInsets.all(5.0),
borderType: BorderType.Circle,
color: ColorPallete().white,
child: Container(
height: 74.38,
width: 74.38,
child: CircleAvatar(
backgroundColor: Color(0xFFDADADA),
),
),
),
SizedBox(height: 11.0,),
Text('Иван Иванович Иванов',style: TextStyle(
fontSize: 14.0,color: ColorPallete().white
),)
],
),
),
Positioned(
bottom: 0,
right: 0,
child: Row(
children: <Widget>[
Text('Выйти',style: TextStyle(fontSize: 14.0,color: ColorPallete().yellow),),
SizedBox(width: 7.0,),
Icon(Icons.arrow_forward,color: ColorPallete().yellow,size: 18.0,),
],
),
)
]
),
),
),
Use a Container widget as your drawer, then a stack of your background image and the drawer's items should be the container's child.
Scaffold(
...,
drawer: Container(
child: Stack(
children: <Widget>[
Image.asset("myBackgroundImage.png"),
ListView(
children: <Widget>[
CircleAvater(),
ListTile(),
ListTile(),
...
],
),
],
),
),
);