Flutter | TabView in body NestedScrollView. How to remove an empty space? - flutter

I use NestedScrollView, I have TabView in the body. If the widget in the tabview is half-empty, then an empty space remains.
As far as I understand, this is due to the fact that my headerSliverBuilder is too long, and the tabview is created at the full height of the screen.
I want to make the same functionality as in the Instagram profile. TabView with posts, saves.
SafeArea(
bottom: IphoneHasNotch.hasNotch ? false : true,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.white
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 15),
child: CreateHeaderWithOutBack(
title: 'Profile',
action: GestureDetector(
onTap: () => showModal(),
child: Icon(FeatherIcons.moreVertical, size: getWidth(25)),
)
),
)
]
)
)
),
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: getHeight(180),
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
ClipRect(
child: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Image.network(userData.avatar != null && userData.avatar.length > 0 ? userData.avatar : 'https://klike.net/uploads/posts/2019-05/1556708032_1.jpg',fit: BoxFit.cover, width: MediaQuery.of(context).size.width,height: getHeight(140),)
),
),
Positioned.fill(
child: Align(
alignment: Alignment.bottomLeft,
child: InkWell(
child: Hero(
tag: 'imageHero',
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20),
height: getWidth(102),
width: getWidth(102),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle
),
padding: EdgeInsets.all(2),
child: Center(
child: CreateImageAvatar(name: userData.name, url: userData.avatar, size: getWidth(100),)
),
)
),
onTap: () {
Navigator.push(
context,PageRouteBuilder(pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) => DetailScreen(userData.avatars),
opaque: false
));
},
)
),
)
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(userData.name + ', ' + userData.age.toString(),
style: TextStyle(fontSize: 21, fontWeight: FontWeight.w600),
),
userData.city != null && userData.city.length > 0 ? Padding(
padding: const EdgeInsets.only(top: 2,bottom: 10),
child: Text(userData.city,
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: kTextColor.withOpacity(0.6)),
),
) : Container(),
userData.company != null && userData.company.length > 0 ? Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SvgPicture.asset('assets/images/work.svg', color: Color(0xFFBEBEBE), width: getWidth(15),),
SizedBox(width: 5),
Text(userData.company,
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Color(0xFFBEBEBE)),
),
],
),
) : Container(),
],
),
),
widget.id == -1 ?GestureDetector(
onTap: (){
Provider.of<AppData>(context,listen: false).updateUserDataProfile(userData);
Navigator.pushNamed(context, EditProfile.routeName);
},
child: Container(
decoration: BoxDecoration(
color: Color(0xFFF6F6F6),
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xFFEFEFEF), width: 1)
),
padding: EdgeInsets.symmetric(vertical: 8,horizontal: 15),
child: Text('Edit',
style: TextStyle(color: Color(0xFF9E9E9E), fontWeight: FontWeight.w500, fontSize: getHeight(12)),
),
),
) : Container()
],
),
userData.bio != null && userData.bio.length > 0 ? Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(userData.bio,
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Color(0xFF6D6D6D)),
),
) : Container(),
SizedBox(height: 20),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CreateBadgeProfile(title: userData.friends.toString(), disc: 'friends',),
SizedBox(width: 10),
CreateBadgeProfile(title: userData.news.toString(), disc: 'posts',),
],
),
],
),
)
],
),
),
SliverPadding(
padding: EdgeInsets.only(top: 25),
sliver: SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFFEAEAEA),
width: 1.0,
),
),
),
child: TabBar(
indicatorWeight: 2.0,
unselectedLabelColor: kTextColor.withOpacity(0.4),
labelStyle: TextStyle(fontFamily: 'Gilroy',fontWeight: FontWeight.w500, fontSize: 14, color: kTextColor.withOpacity(0.4)),
controller: _tabController,
tabs: <Widget> [
Tab(text: 'About'),
Tab(text: 'Posts'),
]
labelColor: kTextColor,
indicatorColor: kPrimaryColor,
),
),
),
)
];
},
body: Container(
child: TabBarView(
controller: _tabController,
children: [
Bio(userData: userData,),
NewsFeed(id:widget.id,post: 'post'),
],
),
)
),
);

Related

Text not resizing when using AutoSizeText

I'm new to developing in Flutter and I'm having an issue when using AutoSizeText isn't working as i thought it would. You can see on the screen grab that my date text is overflowing.
My code for reference. If anyone could point me in the right direction of where i'm going wrong i would be gladly appreciate it!
body: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: [
Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0x76168183),
FlutterFlowTheme.of(context).primaryColor
],
stops: [0, 1],
begin: AlignmentDirectional(0, -1),
end: AlignmentDirectional(0, 1),
),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: EdgeInsetsDirectional.fromSTEB(10, 10, 10, 0),
child: Container(
decoration: BoxDecoration(
color:
FlutterFlowTheme.of(context).secondaryBackground,
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: Color(0xFF168183),
width: 1,
),
),
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
OrderdateWidget(),
],
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AutoSizeText(
dateTimeFormat(
'MMMMEEEEd',
getCurrentTimestamp,
locale: FFLocalizations.of(context)
.languageCode,
),
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'SharpSans',
color: Color(0xFF222F3A),
fontSize: 32,
fontWeight: FontWeight.w800,
useGoogleFonts: GoogleFonts.asMap()
.containsKey(
FlutterFlowTheme.of(context)
.bodyText1Family),
),
),
],
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AutoSizeText(
FFLocalizations.of(context).getText(
'yump08wx' /* Delivery address */,
),
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'SharpSans',
color: Color(0xFF222F3A),
fontSize: 16,
fontWeight: FontWeight.w600,
useGoogleFonts: GoogleFonts.asMap()
.containsKey(
FlutterFlowTheme.of(context)
.bodyText1Family),
),
),
],
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
AutoSizeText(
FFAppState().deliveryAddressName,
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'SharpSans',
fontSize: 22,
fontWeight: FontWeight.w800,
useGoogleFonts: GoogleFonts.asMap()
.containsKey(
FlutterFlowTheme.of(context)
.bodyText1Family),
),
),
],
),
],
),
],
),
),
),
Expanded(
child: Container(
height: 100,
decoration: BoxDecoration(),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
10, 0, 10, 0),
child: Container(
width:
MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context)
.primaryBtnText,
borderRadius:
BorderRadius.circular(5),
border: Border.all(
color: FlutterFlowTheme.of(context)
.primaryColor,
),
),
child: AutoSizeText(
FFLocalizations.of(context).getText(
'61jj7cic' /* Please select point of service... */,
),
textAlign: TextAlign.center,
maxLines: 1,
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'SharpSans',
color: Color(0xFF222F3A),
fontSize: 18,
fontWeight: FontWeight.w600,
useGoogleFonts: GoogleFonts
.asMap()
.containsKey(
FlutterFlowTheme.of(
context)
.bodyText1Family),
),
),
),
),
),
],
),
),
Expanded(
child: Container(
height: 100,
decoration: BoxDecoration(),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
5, 10, 5, 10),
child: Builder(
builder: (context) {
final posGroup =
FFAppState().posGroupJson.toList();
return GridView.builder(
padding: EdgeInsets.zero,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
crossAxisSpacing: 0,
mainAxisSpacing: 10,
childAspectRatio: 3,
),
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: posGroup.length,
itemBuilder: (context, posGroupIndex) {
final posGroupItem =
posGroup[posGroupIndex];
return Padding(
padding:
EdgeInsetsDirectional.fromSTEB(
20, 0, 20, 10),
child: Material(
color: Colors.transparent,
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(5),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Color(0xFF168183),
borderRadius:
BorderRadius.circular(5),
border: Border.all(
color: FlutterFlowTheme.of(
context)
.primaryBtnText,
),
),
child: InkWell(
child: InkWell(
onTap: () async {
setState(() =>
FFAppState()
.posGroupName =
getJsonField(
posGroupItem,
r'''$..posGroupName''',
).toString());
setState(() =>
FFAppState()
.posGroupId =
getJsonField(
posGroupItem,
r'''$..posGroupId''',
).toString());
await Navigator.push(
context,
PageTransition(
type:
PageTransitionType
.fade,
duration: Duration(
milliseconds: 0),
reverseDuration:
Duration(
milliseconds:
0),
child:
PointOfServiceWidget(
parmPOSGroupId:
getJsonField(
posGroupItem,
r'''$..posGroupId''',
).toString(),
),
),
);
},
child: Column(
mainAxisSize:
MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
AutoSizeText(
getJsonField(
posGroupItem,
r'''$..posGroupName''',
).toString(),
style: FlutterFlowTheme
.of(context)
.bodyText1
.override(
fontFamily:
'SharpSans',
color: Colors
.white,
fontSize: 20,
fontWeight:
FontWeight
.w500,
useGoogleFonts: GoogleFonts
.asMap()
.containsKey(
FlutterFlowTheme.of(context)
.bodyText1Family),
),
),
],
),
),
),
),
),
);
},
);
},
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
);
wrap AutoSizeText with Expanded:
Expanded(
child: AutoSizeText(/*...*/),
),

How can I make a Flutter Scaffold scroll to not have TextFields covered

I have a somewhat complicated widget tree and can't figure this out. I've tried wrapping the Scaffold body in a SingleChildScrollView but for some reason it just makes the Container shrink and does not scroll. Here is the build function code:
return Stack(
children: [
Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
background(),
Padding(
padding: const EdgeInsets.only(top: 55),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/logo.png', height: 100),
const SizedBox(width: 5),
const Text('GLOBE',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Color(0xFF7FCCDC)))
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 175, left: 35, right: 35, bottom: 50),
child: Container(
decoration: BoxDecoration(
color: const Color(0xFFFCFBF4).withOpacity(0.5),
borderRadius: BorderRadius.circular(20),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Welcome!',
style: TextStyle(
fontSize: 30, color: Color(0xFF6B6FAB))),
],
),
loginForm()
],
),
),
),
],
),
),
if (_isLoading)
const Opacity(
opacity: 0.8,
child: ModalBarrier(dismissible: false, color: Colors.black),
),
if (_isLoading)
const Center(
child: CircularProgressIndicator(color: Color(0xFFb1bbd8)),
),
],
);
Return a scaffold and add a sized box of height and width same as device. As a body use stack. Then in children add the next stack.
return Scaffold(
resizeToAvoidBottomInset: false,
body: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
background(),
SizedBox(
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: Column(
mainAxisSize : MainAxisSize.min,
children:[
Padding(
padding: const EdgeInsets.only(top: 55),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/logo.png', height: 100),
const SizedBox(width: 5),
const Text('GLOBE',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Color(0xFF7FCCDC)))
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 100, left: 35, right: 35, bottom: 50),
child: Container(
decoration: BoxDecoration(
color: const Color(0xFFFCFBF4).withOpacity(0.5),
borderRadius: BorderRadius.circular(20),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Welcome!',
style: TextStyle(
fontSize: 30, color: Color(0xFF6B6FAB))),
],
),
loginForm()
],
),
),
),
]
)
)
if (_isLoading)
const Opacity(
opacity: 0.8,
child: ModalBarrier(dismissible: false, color: Colors.black),
),
if (_isLoading)
const Center(
child: CircularProgressIndicator(color: Color(0xFFb1bbd8)),
),
]
)
)
)
TextField has a property called scrollPadding.
scrollPadding: EdgeInsets.only(bottom: 40)
By default it is set to EdgeInsets.all(20.0)

Why do I get this line between Containers?

Why do I get a line the color of the image on the bottom of the stack between Containers x and y? And what can I do to avoid that line?print of the screen
I want to have a Container with the standard background color and another one that has the fade effect and both these Containers are supposed to be on top of the background Image
#override
Widget build(BuildContext context) {
FluxoPermissaoNotificacoes fluxo = ModalRoute.of(context)!.settings.arguments as FluxoPermissaoNotificacoes;
DataPermissaoNotificacoes data = getDataPermissaoNotificacoes(fluxo);
return Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
child: Stack(children: [
Stack(
children: [
Padding(padding: EdgeInsets.only(top: 38, left: 0),
child: Container(child: Image.asset("assets/images/permissao_notificacoes.png")),
),
Positioned(top: MediaQuery.of(context).size.height * 0.3, child: SizedBox(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 46.0),
child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(13)),
color: Color(0xffEBEBEB)), child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(children: [
ClipRRect(borderRadius: BorderRadius.all(Radius.circular(5)), child: Image.asset(F.logoSquare ?? 'assets/applogo/android_logo_acad.png', width: 17,)),
Padding(
padding: const EdgeInsets.only(left: 5.0),
child: Text(F.nomeApp, style: TextStyle(fontFamily: 'SFCompact', color: Colors.black, fontSize: 12, fontWeight: FontWeight.w500)),
),
],),
SizedBox(height: 8,),
Text('A sua próxima aula irá começar em meia hora', style: TextStyle(fontFamily: 'SFCompact', color: Colors.black, fontSize: 12, fontWeight: FontWeight.w400))
],),
),),
),
)),
],
),
Column(mainAxisAlignment: MainAxisAlignment.end,
children: [
//container x
Container(height: MediaQuery.of(context).size.height * 0.29,
decoration: BoxDecoration(
gradient: LinearGradient(
end: Alignment.bottomCenter,
begin: Alignment.topCenter,
colors: GetIt.I.get<ControladorApp>().themeMode == ThemeMode.dark ? [
Colors.black.withOpacity(0.0),
Colors.black.withOpacity(0.2),
Colors.black.withOpacity(0.4),
Colors.black.withOpacity(0.6),
Colors.black.withOpacity(0.8),
Colors.black.withOpacity(1),
Colors.black.withOpacity(1),
] : [
Color(0xffFAFAFA).withOpacity(0.0),
Color(0xffFAFAFA).withOpacity(0.1),
Color(0xffFAFAFA).withOpacity(0.25),
Color(0xffFAFAFA).withOpacity(0.5),
Color(0xffFAFAFA).withOpacity(0.8),
Color(0xffFAFAFA),
Color(0xffFAFAFA),
],
),
),
),
//container y
Container(
color: Theme.of(context).backgroundColor,
child: Column(
children: [
SizedBox(height: 12,),
TextHeader(data.headText, textAlign: TextAlign.center,),
SizedBox(height: 16,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: TextBody1(data.bodyText, textAlign: TextAlign.center,),
),
SizedBox(height: 24,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: BotaoPrimario(onTap: () {}, value: "Permitir Notificações",),
),
SizedBox(height: 8,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: BotaoPrimario(onTap: () {
_controladorNotificacao.onTapAgoraNao();
}, value: "Agora não", bordered: true, textColor: Theme.of(context).primaryColor, corDefault: Theme.of(context).cardColor),
),
SizedBox(height: 32,),
],
),
),
],
)
],
),
));
}

How can bind items details from the listview in flutter?

I need help on how to achive binding items from the list view into other widget. For example, I have a listview of Products to be sold, when a sale person click any product from the list, it should be added on top of the screen with it price, then more product can be added each time a sale person press new product from the listview. I have already tried different ways to achieve this. This is a sample of the screen I want to achieve.
This is what I have achieved so far
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NewSale extends StatefulWidget {
const NewSale({Key? key}) : super(key: key);
#override
_NewSaleState createState() => _NewSaleState();
}
class _NewSaleState extends State<NewSale> {
TextEditingController searchingInput = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.green),
backgroundColor: Colors.white,
elevation: 0.0,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(top: 8.0),
child: Text(
"Sales",
style: TextStyle(color: Color(0xff444444), fontSize: 19),
),
),
Text(
"Manage Sales",
style: TextStyle(color: Color(0xffa1a1a1), fontSize: 13),
),
],
),
actions: [
Builder(
builder: (context) => IconButton(
icon: Image.asset("assets/images/icons/sync_products.png"),
onPressed: () => {},
)),
],
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(
Icons.arrow_back,
color: Colors.black,
size: 40, // Changing Drawer Icon Size
),
onPressed: () {
Navigator.pop(context);
},
);
},
),
),
bottomNavigationBar: new Container(
height: 70.0,
padding: EdgeInsets.only(top: 10),
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
child: Container(
width: MediaQuery.of(context).size.width * 0.4,
child: Column(
children: [
MaterialButton(
elevation: 0.00,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Color(0xffFA7659),
width: 1,
style: BorderStyle.solid),
borderRadius: BorderRadius.circular(3)),
textColor: Colors.white,
color: Color(0xffFA7659),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(14.0),
child: Text('CLEAR',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w300)),
),
],
),
],
),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
),
Flexible(
child: Container(
width: MediaQuery.of(context).size.width * 0.4,
child: Column(
children: [
MaterialButton(
elevation: 0.00,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Color(0xff78BD42),
width: 1,
style: BorderStyle.solid),
borderRadius: BorderRadius.circular(3)),
textColor: Colors.white,
color: Color(0xff78BD42),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(14.0),
child: Text(
'CONFIRM',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w300),
),
),
],
),
],
),
onPressed: () {},
),
],
),
),
),
],
),
),
body: SafeArea(
child: Container(
color: Colors.red,
height: MediaQuery.of(context).size.height * 1,
width: MediaQuery.of(context).size.width * 1,
child: Column(
children: [
Flexible(
child: Container(
height: MediaQuery.of(context).size.height * .5,
width: MediaQuery.of(context).size.width * 1,
color: Colors.grey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'==== Product Cart ====',
style: TextStyle(color: Color(0xff5c5c5c)),
textAlign: TextAlign.center,
),
),
),
),
Flexible(
child: Container(
height: MediaQuery.of(context).size.height * .5,
width: MediaQuery.of(context).size.width * 1,
color: Colors.white,
child: Column(
children: [
Row(
children: [
Column(
children: [
Container(
padding: EdgeInsets.fromLTRB(15, 10, 0, 0),
child: MaterialButton(
elevation: 0.00,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Color(0xff828282),
width: 1,
style: BorderStyle.solid),
borderRadius: BorderRadius.circular(3)),
textColor: Colors.white,
color: Color(0xff828282),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Row(
children: [
Image.asset(
'assets/images/icons/scan.png',
width: 20,
height: 20,
),
Padding(
padding:
const EdgeInsets.all(14.0),
child: Text('SCAN',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight:
FontWeight.w300)),
),
],
),
],
),
],
),
onPressed: () {},
),
),
],
),
Flexible(
child: Column(
children: [productSearchingField()],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: Container(
width: MediaQuery.of(context).size.width * 0.6,
padding: EdgeInsets.fromLTRB(15, 7, 15, 0),
child: Column(
children: [
MaterialButton(
elevation: 0.00,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Color(0xff78BD42),
width: 1,
style: BorderStyle.solid),
borderRadius: BorderRadius.circular(3)),
textColor: Colors.white,
color: Color(0xff78BD42),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Row(
children: [
Column(
children: [Icon(Icons.add)],
),
Column(
children: [
Padding(
padding:
const EdgeInsets.only(
top: 14.0,
bottom: 14.0),
child: Text(
'ADD NEW PRODUCT',
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight:
FontWeight
.w300),
),
),
],
),
],
),
],
),
],
),
onPressed: () {},
),
],
),
),
),
],
),
Flexible(
child: Container(
child: ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: Image.asset(
'assets/images/icons/brand-identity.png',
width: 50,
height: 50,
),
trailing: Text(
"100,000",
style: TextStyle(
color: Colors.green, fontSize: 15),
),
title: Text("This is item $index"),
subtitle: Text('Electronics'),
);
}),
),
),
],
),
),
),
],
),
),
),
);
}
productSearchingField() {
return Container(
padding: EdgeInsets.fromLTRB(15, 10, 15, 0),
height: 60,
child: TextFormField(
controller: searchingInput,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Search Product or Barcode',
prefixIcon: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.search,
color: Colors.black54,
)),
),
),
);
}
}
Here i manage to do this using the below code hope it will work for you
class _DummyDesignState extends State<DummyDesign> {
List<String> ShoppingItems = ['Ball', 'Clet', 'JoyStick'];
List<String> PurchasedItem = [];
#override
Widget build(BuildContext context) {
print('List length is ${ShoppingItems.length}');
print('List length is ${PurchasedItem.length}');
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: PurchasedItem.isEmpty
? Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.2,
child: ListView.builder(
itemCount: ShoppingItems.length,
itemBuilder: (context, index) {
return ListTile(
onTap: (){
PurchasedItem.add(ShoppingItems[index]);
setState(() {
});
},
leading: Icon(Icons.list),
title: Text(
ShoppingItems[index],
style: TextStyle(color: Colors.green, fontSize: 15),
));
}),
),
)
: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.4,
child: ListView.builder(
itemCount: PurchasedItem.length,
itemBuilder: (context, index) {
return Text(PurchasedItem[index]);
}),
),
Container(
height: MediaQuery.of(context).size.height * 0.4,
child: ListView.builder(
itemCount: ShoppingItems.length,
itemBuilder: (context, index) {
return ListTile(
onTap: (){
PurchasedItem.add(ShoppingItems[index]);
setState(() {
});
},
leading: Icon(Icons.list),
title: Text(
ShoppingItems[index],
style: TextStyle(color: Colors.green, fontSize: 15),
));
}),
),
],
),
),
));
}
}

SingleChildScrollView doesn't scroll screen with ListView.builder

I'm trying to get it so that all of the items in ListView.builder can be displayed on the screen and seen by scrolling. However, I think because the ListView.builder is in a stack, it is not allowing the whole screen to scroll. I don't want the ListView.builder to scroll on its own, I want only the whole page to be scrollable. Thanks in advance.
import 'sign_up_page.dart';
import 'package:intl/intl.dart';
import 'settings_page.dart';
import 'new_event_page.dart';
import 'event_settings_page.dart';
class HomeScreen extends StatefulWidget {
static const String id = 'home_screen';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
double width;
double height;
int mediumScreenSize = 800;
int largeScreenSize = 1000;
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Color.fromRGBO(255, 255, 255, 1),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children:[
Container(
child: AspectRatio(
aspectRatio: mediumScreenSize < height ? 0.76 : 0.87,
),
decoration: BoxDecoration(
color: Color(0xff212a3d),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)
),
),
),
Container(
height: height,
child: Column(
children: [
AspectRatio(
aspectRatio: 10,
),
Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(width/35),
child: Text('Home',
style: TextStyle(
fontFamily: 'Chivo Bold',
fontSize: mediumScreenSize < height ? 22.0 : 21.0,
color: Colors.white,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: width/10),
child: ButtonTheme(
padding: EdgeInsets.all(0),
minWidth: width/10,
child: FlatButton(onPressed: () {
Navigator.pushNamed(context, SettingsPage.id);
},
child: Image.asset('images/gear.png', height: 22),
),
),
),
],
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: height/5,
),
Container(
padding: EdgeInsets.only(left: width/7.5),
//TO DO: replace fullName variable when user updates user information
child: Text('Welcome' + UserInformation.userStatus + ',' + '\n' + UserInformation.fullName, style: TextStyle(
fontFamily: 'Poppins SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 26.0 : 25.0,
letterSpacing: 0.5,
color: Colors.white,
),
),
),
],
),
AspectRatio(
aspectRatio: height > mediumScreenSize ? 4: 7,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: width/1.2,
child: AspectRatio(
aspectRatio: 6.5,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
),
color: Color.fromRGBO(102, 161, 192, 1),
onPressed: () {
EventInformation.eventDate = DateFormat.yMMMMd().format(DateTime.now());
Navigator.pushNamed(context, NewEventPage.id);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(top: width * 0.015),
child: Image.asset(
'images/+.png',
height: width/16,
),
),
Text(
' Add new event',
style: TextStyle(
color: Colors.white,
fontFamily: 'Chivo Regular',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
],
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: width/15, bottom: width/40),
child: Container(
child: Text('My Events:', style: TextStyle(
fontFamily: 'Overpass SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
letterSpacing: 1.0,
color: Colors.white,
),
),
),
),
],
),
UserInformation.events.length == 0 ? Container (
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
AspectRatio(
aspectRatio: height > mediumScreenSize ? 2.5: 4,
),
Text('No events listed', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Bold', fontSize: mediumScreenSize < height ? 20.0 : 19.0),),
Text('\nAdd a new event by selecting the "+" button above', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Regular'),),
],
),):
Expanded(
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: UserInformation.events.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(bottom: width/20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
Navigator.pushNamed(context, EventSettingsPage.id);
},
child: Container(width: width/1.2,
height: width/5.5,
decoration: new BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(15),
boxShadow: [BoxShadow(
color: Color(0x15525768),
offset: Offset(-12,15),
blurRadius: 22,
spreadRadius: 0
),BoxShadow(
color: Color(0x0c525768),
offset: Offset(12,-15),
blurRadius: 22,
spreadRadius: 0
) ],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: width/10),
child: Text(UserInformation.events[index],
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Color(0xff212a3d),
fontFamily: 'Overpass Bold',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
),
Container(
padding: EdgeInsets.only(right: width/15),
child: new Image.asset(
'images/mini_arrow.png',
height: 30.0,
),
),
],
),
),
),
],
),
);
}
),
),
],
),
),
],
),
],
),
),
);
}
}
add this two line in your listview :-ListView.builder( physics: NeverScrollableScrollPhysics(),
child: Scaffold(
backgroundColor: Color.fromRGBO(255, 255, 255, 1),
body: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(
children: <Widget>[
Stack(
children:[
Container(
height: mediumScreenSize < height ? width/0.8 : width/0.8,
width: double.infinity,
decoration: BoxDecoration(
color: Color(0xff212a3d),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)
),
),
),
Column(
children: [
Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(top: width/9),
child: Text('Home',
style: TextStyle(
fontFamily: 'Chivo Bold',
fontSize: mediumScreenSize < height ? 22.0 : 21.0,
color: Colors.white,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: width/13),
padding: EdgeInsets.only(right: width/10),
child: ButtonTheme(
padding: EdgeInsets.all(0),
minWidth: width/10,
child: FlatButton(onPressed: () {
Navigator.pushNamed(context, SettingsPage.id);
},
child: Image.asset('images/gear.png', height: 22),
),
),
),
],
),
],
),
SizedBox(
height: width/4,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.only(left: width/7.5),
child: Text('Welcome' + UserInformation.userStatus + ',' + '\n' + UserInformation.fullName, style: TextStyle(
fontFamily: 'Poppins SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 26.0 : 25.0,
letterSpacing: 0.5,
color: Colors.white,
),
),
),
],
),
SizedBox(
height: width/4.75,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: width/1.2,
child: AspectRatio(
aspectRatio: 6.5,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
),
color: Color.fromRGBO(102, 161, 192, 1),
onPressed: () {
EventInformation.displayEventDate = DateFormat.yMMMMd().format(DateTime.now());
Navigator.pushNamed(context, NewEventPage.id);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.only(top: width * 0.015),
child: Image.asset(
'images/+.png',
height: width/16,
),
),
Text(
' Add new event',
style: TextStyle(
color: Colors.white,
fontFamily: 'Chivo Regular',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
],
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: width/15),
child: Container(
child: Text('My Events:', style: TextStyle(
fontFamily: 'Overpass SemiBold',
fontWeight: FontWeight.w600,
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
letterSpacing: 1.0,
color: Colors.white,
),
),
),
),
],
),
],
),
Padding(
padding: EdgeInsets.only(top: width/ 0.9),
child: UserInformation.events.length == 0 ? Container (
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
AspectRatio(
aspectRatio: height > mediumScreenSize ? 2.5: 4,
),
Text('No events listed', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Bold', fontSize: mediumScreenSize < height ? 20.0 : 19.0),),
Text('\nAdd a new event by selecting the "+" button above', textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Regular'),),
],
),):
ListView.builder(
padding: EdgeInsets.only(top: width/20, bottom: width/20),
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: UserInformation.events.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(bottom: width/20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
Navigator.pushNamed(context, EventSettingsPage.id);
},
child: Container(width: width/1.2,
height: width/5.5,
decoration: new BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(15),
boxShadow: [BoxShadow(
color: Color(0x15525768),
offset: Offset(-12,15),
blurRadius: 22,
spreadRadius: 0
),BoxShadow(
color: Color(0x0c525768),
offset: Offset(12,-15),
blurRadius: 22,
spreadRadius: 0
) ],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: width/10),
child: Text(UserInformation.events[index],
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Color(0xff212a3d),
fontFamily: 'Overpass Bold',
fontSize: mediumScreenSize < height ? 16.0 : 15.0,
),
),
),
Container(
padding: EdgeInsets.only(right: width/15),
child: new Image.asset(
'images/mini_arrow.png',
height: 30.0,
),
),
],
),
),
),
],
),
);
}
),
),
],
),
],
),
),
),
This is the way I figured out how to do it without any hardcoded height inputs. The problem was the ListView.builder was in a Container with no specified height.
Inside ListView.builder : use property physics and give NeverScrollableScrollPhysics() as a value ex:
physics: NeverScrollableScrollPhysics(),