How to fix a widget's position to not move while scrolling in flutter
1,908
I suggest you to make the drawer as a screen. Give the right side of it as white totally so it will be likely a drawer and rest as a normal screen. Stack the listviews and then physics: NeverScrollableScrollPhysics(), will work as intended.
With custom screen there can be many other options as well so you will be having the right thing with slight compromise over the blurriness of actual drawer over the screen which you can also cover but it will be too complex I guess you may try.
Author by
Max Moe
Updated on December 30, 2022Comments
-
Max Moe over 1 year
I have made a custom drawer ui but I want the user details part of it and the logout button shouldn't be scrolling. I've used positioned but it gives incorrect parent usage and in stack separately on every single widget its not working how can I achieve static ui position I don't want to get the user details and logout button move as well with the scroll and also I don't want to lose responsiveness over different screen sizes.
import 'package:avunja/commons/colors.dart'; import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'onlinebutton.dart'; class InkWellDrawer extends StatefulWidget { @override _InkWellDrawerState createState() => _InkWellDrawerState(); } class _InkWellDrawerState extends State<InkWellDrawer> { bool _enable = false; @override Widget build(BuildContext ctxt) { return Drawer( child: Container( color: Color(ReddishColor), child: ListView( children: <Widget>[ Container( child: Column( children: <Widget>[ SizedBox( height: 10, ), Padding( padding: EdgeInsets.only(), child: Container( height: 80, color: Color(0xFFBB0218), child: Stack( children: <Widget>[ Positioned( child: Align( alignment: Alignment.centerLeft, child: Padding( padding: EdgeInsets.only(left: 20), child: CircleAvatar( radius: 30.0, backgroundImage: AssetImage("assets/girl.png"), backgroundColor: Colors.white, ), ), ), ), Positioned( child: Align( alignment: Alignment.centerLeft, child: Padding( padding: EdgeInsets.only(left: 90, bottom: 40), child: Text( "Angela Moury", style: TextStyle( fontWeight: FontWeight.w500, color: Colors.white, fontSize: 16), )), ), ), Positioned( child: Align( alignment: Alignment.centerLeft, child: Padding( padding: EdgeInsets.only(left: 90, top: 5), child: Text( "(254)7XX XX5 555", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w500, fontSize: 14), )), ), ), Positioned( child: Align( alignment: Alignment.centerLeft, child: Padding( padding: EdgeInsets.only(left: 90, top: 45), child: Text("[email protected]", style: TextStyle( fontWeight: FontWeight.w500, fontSize: 14, color: Colors.white)), ), ), ), ], ), )), Padding( padding: EdgeInsets.only(left: 20, right: 20, top: 5), child: Container( child: Image.asset("assets/dividinglinedrawer.png"), ), ), SizedBox( height: 10, ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/power.png'), title: Text( 'Online Status', style: TextStyle(fontSize: 14, color: Colors.white), ), trailing: CustomSwitch( value: _enable, onChanged: (bool val) { setState(() { _enable = val; }); }, ), onTap: () {}, ), ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/house.png'), title: Text( 'Home', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/mail.png'), title: Text( 'Inbox', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/notification.png'), title: Text( 'Notifications', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), SizedBox( height: 5, ), Padding( padding: EdgeInsets.only(left: 20, right: 20, top: 5), child: Container( child: Image.asset("assets/dividinglinedrawer.png"), ), ), SizedBox( height: 5, ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/account.png'), title: Text( 'Account', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/payment.png'), title: Text( 'Payment', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/topup.png'), title: Text( 'Topup', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/withdraw.png'), title: Text( 'Withdraw', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/bills.png'), title: Text( 'Bills & Utilities', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), SizedBox( height: 5, ), Padding( padding: EdgeInsets.only(left: 20, right: 20, top: 5), child: Container( child: Image.asset("assets/dividinglinedrawer.png"), ), ), SizedBox( height: 5, ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/reports.png'), title: Text( 'Reports', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/transactions.png'), title: Text( 'Transactions', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), SizedBox( height: 5, ), Padding( padding: EdgeInsets.only(left: 20, right: 20, top: 5), child: Container( child: Image.asset("assets/dividinglinedrawer.png"), ), ), SizedBox( height: 5, ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/reward.png'), title: Text( 'Rewards & Promotions', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/refer.png'), title: Text( 'Refer', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), SizedBox( height: 5, ), Padding( padding: EdgeInsets.only(left: 20, right: 20, top: 5), child: Container( child: Image.asset("assets/dividinglinedrawer.png"), ), ), SizedBox( height: 5, ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/support.png'), title: Text( 'Support', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), Column( children: <Widget>[ Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/settings.png'), title: Text( 'Settings', style: TextStyle( fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), ], ), ], ), SizedBox( height: 5, ), Padding( padding: EdgeInsets.only(left: 20, right: 20, top: 5), child: Container( child: Image.asset("assets/dividinglinedrawer.png"), ), ), SizedBox( height: 15, ), Padding( padding: EdgeInsets.only(), child: Container( height: 60, color: Color(0xFFBB0218), child: Padding( padding: EdgeInsets.only(), child: ListTile( leading: Image.asset('assets/logout.png'), title: Text( 'Logout', style: TextStyle(fontSize: 14, color: Colors.white), ), onTap: () {}, ), ), )), SizedBox( height: 50, child: Container( height: 50, ), ) ], ), ), ], ), ), ); } }-
Rohan Thacker almost 3 yearsCan you add a screenshot of the current page and the desired result? Its hard to visualize the issue from just the code :) -
Naveen Avidi almost 3 yearsAdd the screenshots or diagram how you want ? (As said by @RohanThacker) -
Rohan Thacker almost 3 yearsScreenshots would be great!
-
Max Moe almost 3 yearsAdded screenshots, I just want the profile part of it static It shouldn't be scrolling when I scroll down for other options in the drawer. Same applies for logout need it fixed
-