Listview Item is overflow on Top of layout when scrolling - flutter

Question

My listview widget is overflowed over another widget like the below screen.
Here is my full code.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:propsoft/utils/dotted_decor.dart';
import '../../utils/app_theme.dart';
import '../../widget/elevated_icon_button_widget.dart';
import '../../widget/helper_utils.dart';
import '../../widget/label_widget.dart';
import 'create_user_logic.dart';
class CreateUserPage extends GetView<CreateUserLogic> {
final logic = Get.find<CreateUserLogic>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppbar(),
body: SafeArea(child: getBodyDetails()),
);
}
Widget getBodyDetails() {
return Column(
children: [
getSearchWidget(),
DefaultTabController(
length: 2,
child: Expanded(
child: Column(
children: [getTabBar(), getTabVarView()],
),
),
),
],
);
}
Widget getTabBar() {
return TabBar(
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0, color: AppTheme.colors.black)),
labelColor: AppTheme.colors.black,
unselectedLabelColor: AppTheme.colors.gray,
indicatorSize: TabBarIndicatorSize.tab,
tabs: const [
Tab(text: "Users"),
Tab(
text: 'Status',
),
],
);
}
Widget getTabVarView() {
return Expanded(
child: TabBarView(
children: [
usersList(),
const Center(
child: Text("Status"),
),
]),
);
}
Widget usersList() {
return Column(
children: [
Expanded(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: DottedDecoration(
color: AppTheme.colors.darkBlue, shape: Shape.circle),
child: Icon(
Icons.add,
color: AppTheme.colors.darkBlue,
),
),
const SizedBox(
width: 20,
),
PLabel(
text: "Invite New Users",
enumFontWeight: PSFontWeight.bold,
textColor: AppTheme.colors.darkBlue,
)
],
),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, position) {
return InkWell(
onTap: () {},
child: Container(
margin:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Row(
children: [
PIconButton(
backgroundColor: AppTheme.colors.lightBlue,
icon: const PLabel(
fontSize: 22,
text: "HT",
),
),
const SizedBox(
width: 16,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
PLabel(text: "My Contact List"),
SizedBox(
height: 4,
),
PLabel(text: "Activated"),
],
)
],
),
),
);
},
itemCount: 10,
),
)
],
),
),
],
);
}
Widget getSearchWidget() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
controller: controller.searchController,
onChanged: (query) {
controller.filterSearchResult(query);
},
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4)),
labelText: "Search for a user",
)),
)
],
));
}
AppBar customAppbar() {
return AppBar(
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: InkWell(
onTap: () {},
child: PLabel(
text: "Save",
fontSize: 18,
textColor: AppTheme.colors.darkBlue,
)),
),
)
],
leading: IconButton(
icon: getSVGImage("assets/images/cross.svg"),
onPressed: () {
Get.back();
},
),
leadingWidth: 40,
title: const PLabel(
text: "Users & Group",
fontSize: 22,
),
backgroundColor: AppTheme.colors.white,
elevation: 0);
}
}

Answer 1

I have worked on your code....its work fine only...
Things changed... instead of PLabel Widget I have used Text Widget and Instead of PIconButton Widget I have used normal Icon Widget.... take my code as reference only...because I have changed your icons because of not having getSVGImage package and some other package.. And attaching image for your reference
Working example:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppbar(),
body: SafeArea(child: getBodyDetails()),
);
}
Widget getBodyDetails() {
return Column(
children: [
getSearchWidget(),
DefaultTabController(
length: 2,
child: Expanded(
child: Column(
children: [getTabBar(), getTabVarView()],
),
),
),
],
);
}
Widget getTabBar() {
return const TabBar(
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0, color: Colors.black)),
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorSize: TabBarIndicatorSize.tab,
tabs: [
Tab(text: "Users"),
Tab(
text: 'Status',
),
],
);
}
Widget getTabVarView() {
return Expanded(
child: TabBarView(
children: [
usersList(),
const Center(
child: Text("Status"),
),
]),
);
}
Widget usersList() {
return Column(
children: [
Expanded(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blueAccent, shape: BoxShape.circle),
child: Icon(
Icons.add,
color: Colors.black12,
),
),
const SizedBox(
width: 20,
),
Text(
"Invite New Users",
)
],
),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, position) {
return InkWell(
onTap: () {},
child: Container(
margin:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Row(
children: [
IconButton(
color: Colors.lightBlue,
icon : const Icon(
Icons.home,
),
onPressed: () { },
),
const SizedBox(
width: 16,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("My Contact List"),
SizedBox(
height: 4,
),
Text("Activated"),
],
)
],
),
),
);
},
itemCount: 10,
),
)
],
),
),
],
);
}
Widget getSearchWidget() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
// controller: controller.searchController,
// onChanged: (query) {
// controller.filterSearchResult(query);
// },
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4)),
labelText: "Search for a user",
)),
)
],
));
}
AppBar customAppbar() {
return AppBar(
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: InkWell(
onTap: () {},
child: Text(
"Save",
)),
),
)
],
leading: IconButton(
icon: Icon(Icons.book),
onPressed: () {
// Get.back();
},
),
leadingWidth: 40,
title: const Text(
"Users & Group",
),
backgroundColor: Colors.white,
elevation: 0);
}