Develop Reference

How do i put a horizontal listview of boxdecoration under another boxdecoration?

Hellog guys im new to flutter and wanted to make a homepage with a horizontal listview below a boxdecoration for my health app.
here is my UI that i build in figma
i want to make my homepage to be like that but cant quite understand how to do it.
btw this is my current homepage so far
and this is my code
//import 'dart:js';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'package:medreminder/NewsArticle/news_home.dart';
import 'package:medreminder/Recipe/recipe_home.dart';
import 'package:medreminder/Reminder/ui/theme.dart';
import 'package:medreminder/TipsAndTricks/screens/tips_screen.dart';
import 'Reminder/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
import 'package:medreminder/main.dart';
import 'package:medreminder/home_page.dart';
void main() {
// debugPaintSizeEnabled = true;
runApp(const HomePage());
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Mr. Health App"),
backgroundColor: Color(0XFF0080FE),
),
body: Stack(
alignment: Alignment.topCenter,
children: [
Image.asset('images/MenuImg.jpg'),
Container(
height: 250,
width: 310,
margin: const EdgeInsets.only(top: 150),
padding: const EdgeInsets.only(
left: 20,
right: 20,
top: 15,
bottom: 15,
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(25.0)),
color: context.theme.backgroundColor,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 6),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
icon: Image.asset('images/reminder.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => const ReminderHomePage()),
);
},
),
Text("Medicine\nReminder", style: normalStyle,)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/news.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => NewsHomePage()),
);
},
),
Text(" News \n& Article", style: normalStyle)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/recipe.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => RecipeHomePage()),
);
},
),
Text("Healty Food \n Recipe", style: normalStyle)
],
),
],
),
SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
icon: Image.asset('images/tips.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => const TipsList()),
);
},
),
Text("Tips &\n Tricks", style: normalStyle,)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/about.png'),
iconSize: 45,
onPressed: () {
},
),
Text("About Us\n", style: normalStyle)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/recipe.png'),
iconSize: 45,
onPressed: () {},
),
Text("Healty Food \n Recipe", style: normalStyle)
],
),
],
)
],
),
),
],
));
}
}
i hope you guys can help me. thankyou so much

A horizontal list view can be created by ListView.builder widget. By default scroll direction of this list is vertical hence you have to change it to horizontal : -
scrollDirection: Axis.horizontal,
Full Code : -
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const View(),
);
}
}
class View extends StatefulWidget {
const View({super.key});
#override
State<View> createState() => _ViewState();
}
class _ViewState extends State<View> {
List doctorName = ["A", "B", "C"];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 236, 230, 230),
body: Padding(
padding: const EdgeInsets.only(top: 550),
child: SizedBox(
height: 240,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: doctorName.length,
itemBuilder: ((context, index) {
return (Container(
margin: EdgeInsets.only(
top: 15,
bottom: 15,
left: 25,
right: index == 2 ? 25 : 0),
padding: const EdgeInsets.only(left: 15, right: 15),
width: 360,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(20.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 5.0,
spreadRadius: 2.0,
offset: const Offset(0.0, 6.0)),
]),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const CircleAvatar(
radius: 45.0,
child: Icon(
Icons.person,
size: 45,
),
),
const SizedBox(
width: 20,
),
Column(
children: [
const SizedBox(
height: 40,
),
Text(
doctorName[index],
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700),
),
const SizedBox(
height: 10,
),
const Text(
'Text 1',
style: TextStyle(
fontSize: 18,
),
),
const Text(
'Text 2',
style: TextStyle(
fontSize: 18,
),
),
const SizedBox(
height: 10,
),
],
)
],
),
const Divider(
color: Colors.black,
thickness: 1.0,
),
const SizedBox(
height: 10,
),
const Text(
'Body ...',
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.w400),
),
],
),
));
})),
),
));
}
}
Output : -

How to remove extra space below a TabBarView inside the body SliverToBoxAdapter in NestedScrollView?

The space between tab bar view and bottom navigation bar is the extra space that I want to remove.
in the image, you can see the space that shouldn't be there
class Tab_Bar2 extends StatefulWidget {
const Tab_Bar2({Key? key}) : super(key: key);
#override
_Tab_Bar2State createState() => _Tab_Bar2State();
}
class _Tab_Bar2State extends State<Tab_Bar2> with SingleTickerProviderStateMixin {
final bodyGlobalKey = GlobalKey();
final List<Widget> myTabs = [
Text(..),
Text(..),
Text(..),
Text(..),
Text(..),
Text(..),
];
late TabController _tabController;
late ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
_tabController = TabController(length: 6, vsync: this);
super.initState();
}
#override
void dispose() {
_tabController.dispose();
_scrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Dashboard"),
centerTitle: true,
backgroundColor: const Color(0xffFFC36A),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.notifications),
),
]),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Color(0xffFFC36A),
),
child: Padding(
padding: EdgeInsets.only(top: 20.0, left: 60),
child: Text(
'Drawer',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
),
ListTile(
title: const Text('Log Out'),
onTap: () {
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, value) {
return [
SliverToBoxAdapter(child: Column(
children: [img1(), grid(), rsp(), LiveChart()],
),),
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 15,vertical: 15),
child: Text('Latest',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
fontFamily: 'railway',
color: Theme_Data.font_color,
),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 3.5),
padding: EdgeInsets.symmetric(horizontal: 2.5,vertical: 2.5),
height: 35,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade200),
borderRadius: BorderRadius.all(
Radius.circular(25),
),
),
child: TabBar(
controller: _tabController,
labelPadding: EdgeInsets.symmetric(horizontal: 2.0, vertical: 5),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: Theme_Data.th_light_color),
tabs: myTabs,
),
),
],
),
),
];
},
body: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.white
),
child: TabBarView(
controller: _tabController,
children: <Widget>[
SalesTable(),
QuotationsTable(),
PurchasesTable(),
TransfersTable(),
ConsumersTable(),
SuppliersTable(),
],
),
),
),
),
);
}
}
in above code i think there might be the issues between the usage of SviverToBoxAdapter what widget should i use instead to achieve the required design

How can i rebuild a listview.builder?

I need to rebuild my listview because it is only maintaining the first build, unless I reset the app. I have a bottom sheet pop up that lets me select times and navigate me to a new page where the listview.builder builds. If I back out of the page, select new options, and go back into the page, it does not update. Here is an example:
Relevant Code:
final selectTimesTextStyle = TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
);
final List classBools = [
checkedPreBallet,
checkedBeginningBallet,
checkedIntermediateBallet,
checkedAdvancedBallet,
checkedJazz,
checkedPC,
];
final List<String> preballetItems = [
'Wednesday 3:00-4:00',
'Friday 3:00-3:35',
];
final List<String> privateClassesItems = [
'Mondays, Schedule Via Email',
];
final List<String> intermediateBalletItems = [
'Tuesday 5:00-6:00',
'Thursday 5:00-6:00',
'Saturday 10:00-11:00',
];
final List<String> advancedBalletItems = [
'Tuesday 6:00-7:00',
'Thursday 6:00-7:00',
];
final List<String> beginningBalletItems = [
'Wednesday 3:45-4:45',
'Friday 3:45-4:45',
];
final List<String> jazzItems = [
'Thursday 4:00-5:00',
];
final List<List> listOfLists = [
preballetItems,
beginningBalletItems,
intermediateBalletItems,
advancedBalletItems,
jazzItems,
privateClassesItems,
];
List<String> valueChoose = [
'Wednesday 3:00-4:00',
'Wednesday 3:45-4:45',
'Tuesday 5:00-6:00',
'Tuesday 6:00-7:00',
'Thursday 4:00-5:00',
'Mondays, Schedule Via Email',
];
class TimeSelection extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: InkWell(
onTap: () => {
Navigator.of(context).pop(),
currentIndex = 2,
checkedPreBallet = false,
checkedBeginningBallet = false,
checkedIntermediateBallet = false,
checkedAdvancedBallet = false,
checkedJazz = false,
checkedPC = false,
},
child: Container(
child: Icon(Icons.arrow_back),
),
),
title: Text('Select Times'),
centerTitle: true,
),
body: StatefulBuilder(
builder: (context, setState) => Column(
children: [
Expanded(
child: ListView.builder(
itemCount: 6,
itemBuilder: (context, index) => Visibility(
maintainState: false,
visible: classBools[index],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
child: Text(
buttonTitles[index],
style: selectTimesTextStyle,
),
width: MediaQuery.of(context).size.width * 0.50,
),
Container(
width: MediaQuery.of(context).size.width * 0.40,
child: DropdownButton(
isExpanded: true,
underline: SizedBox(),
dropdownColor: Colors.white,
value: valueChoose[index],
onChanged: (newValue) => {
setState(() {
valueChoose[index] = newValue;
})
},
items: listOfLists[index]
.map((e) => DropdownMenuItem(
onTap: () => {
classBools[index] = true,
},
child: Text(e),
value: e,
))
.toList(),
),
),
],
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 120,
vertical: 15,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.00005,
1,
],
colors: [
Theme.of(context).secondaryHeaderColor,
Theme.of(context).primaryColor,
]),
boxShadow: [
BoxShadow(color: Colors.black54, offset: Offset(3, 3)),
],
color: Colors.purpleAccent,
borderRadius: BorderRadius.circular(15),
),
child: InkWell(
onTap: () => {},
child: Padding(
padding: EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('PayPal'),
],
),
),
),
),
),
],
),
),
);
}
}
bool checkedPreBallet = false;
bool checkedBeginningBallet = false;
bool checkedIntermediateBallet = false;
bool checkedAdvancedBallet = false;
bool checkedJazz = false;
bool checkedPC = false;
final List<String> buttonTitles = [
'Pre-Ballet',
'Beginning Ballet',
'Intermediate Ballet',
'Advanced Ballet',
'Jazz',
'Private Classes',
];
class RegisterPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Divider(),
Text('hello'),
Divider(),
RegisterCards(),
],
),
);
}
}
class RegisterCards extends StatefulWidget {
#override
_RegisterCardsState createState() => _RegisterCardsState();
}
class _RegisterCardsState extends State<RegisterCards> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.00005,
1,
],
colors: [
Theme.of(context).secondaryHeaderColor,
Theme.of(context).primaryColor,
]),
boxShadow: [
BoxShadow(color: Colors.black54, offset: Offset(3, 3)),
],
color: Colors.purpleAccent,
borderRadius: BorderRadius.circular(15),
),
child: InkWell(
onTap: () => onButtonPressed(context),
child: Padding(
padding: EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Register Here'),
],
),
),
),
),
);
}
}
class ClassListWidget extends StatefulWidget {
#override
_ClassListWidgetState createState() => _ClassListWidgetState();
}
class _ClassListWidgetState extends State<ClassListWidget> {
#override
Widget build(BuildContext context) {
return StatefulBuilder(
builder: (context, setState) => Column(
children: [
CheckboxListTile(
value: checkedPreBallet,
onChanged: (value) => {
setState(() {
checkedPreBallet = value;
})
},
title: Text('Pre-Ballet'),
checkColor: Theme.of(context).scaffoldBackgroundColor,
activeColor: Theme.of(context).primaryColor,
secondary: Icon(PokemonIcons.i004_charmander),
controlAffinity: ListTileControlAffinity.leading,
tristate: false,
),
CheckboxListTile(
value: checkedBeginningBallet,
onChanged: (value) => {
setState(() {
checkedBeginningBallet = value;
})
},
title: Text('Beginning Ballet'),
checkColor: Theme.of(context).scaffoldBackgroundColor,
activeColor: Theme.of(context).primaryColor,
secondary: Icon(PokemonIcons.i004_charmander),
controlAffinity: ListTileControlAffinity.leading,
tristate: false,
),
CheckboxListTile(
value: checkedIntermediateBallet,
onChanged: (value) => {
setState(() {
checkedIntermediateBallet = value;
})
},
title: Text('Intermediate Ballet'),
checkColor: Theme.of(context).scaffoldBackgroundColor,
activeColor: Theme.of(context).primaryColor,
secondary: Icon(PokemonIcons.i004_charmander),
controlAffinity: ListTileControlAffinity.leading,
tristate: false,
),
CheckboxListTile(
value: checkedAdvancedBallet,
onChanged: (value) => {
setState(() {
checkedAdvancedBallet = value;
})
},
title: Text('Advanced Ballet'),
checkColor: Theme.of(context).scaffoldBackgroundColor,
activeColor: Theme.of(context).primaryColor,
secondary: Icon(PokemonIcons.i004_charmander),
controlAffinity: ListTileControlAffinity.leading,
tristate: false,
),
CheckboxListTile(
value: checkedJazz,
onChanged: (value) => {
setState(() {
checkedJazz = value;
})
},
title: Text('Jazz'),
checkColor: Theme.of(context).scaffoldBackgroundColor,
activeColor: Theme.of(context).primaryColor,
secondary: Icon(PokemonIcons.i004_charmander),
controlAffinity: ListTileControlAffinity.leading,
tristate: false,
),
CheckboxListTile(
value: checkedPC,
onChanged: (value) => {
setState(() {
checkedPC = value;
})
},
title: Text('Private Classes'),
checkColor: Theme.of(context).scaffoldBackgroundColor,
activeColor: Theme.of(context).primaryColor,
secondary: Icon(PokemonIcons.i004_charmander),
controlAffinity: ListTileControlAffinity.leading,
tristate: false,
),
],
),
);
}
}
void onButtonPressed(context) {
showModalBottomSheet(
isScrollControlled: false,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
),
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
context: context,
builder: (context) => StatefulBuilder(
builder: (BuildContext context, setState) => Container(
child: Column(
children: [
ClassListWidget(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.00005,
1,
],
colors: [
Theme.of(context).secondaryHeaderColor,
Theme.of(context).primaryColor,
]),
boxShadow: [
BoxShadow(color: Colors.black54, offset: Offset(3, 3)),
],
color: Colors.purpleAccent,
borderRadius: BorderRadius.circular(15),
),
child: InkWell(
onTap: () => {
Navigator.push(context, MaterialPageRoute(
builder: (context) => TimeSelection(),
)),
},
child: Padding(
padding: EdgeInsets.all(14),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Select Times'),
],
),
),
),
),
),
],
),
),
),
);
}

check this out whether it fits your need.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: TimeSelection(),
);
}
}
// model class for your ballet
class Ballet {
final String balletName;
final List<String> timeSchedules;
final String description;
String selectedTime;
bool isSelected = false;
Ballet({
this.balletName,
this.timeSchedules,
isSelected,
this.description = '',
this.selectedTime
}) {selectedTime ??= this.timeSchedules[0];}
}
List<Ballet> balletItems = <Ballet>[
Ballet(
balletName: "Pre-Ballet",
timeSchedules: [
'Wednesday 3:00-4:00',
'Friday 3:00-3:35',
],
),
Ballet(
balletName: "Private Classes",
timeSchedules: [
'Mondays',
],
description: 'Scheduled Via Email'
),
Ballet(
balletName: "Intermediate Ballet",
timeSchedules: [
'Tuesday 5:00-6:00',
'Thursday 5:00-6:00',
'Saturday 10:00-11:00',
],
),
Ballet(
balletName: "Advance Ballet",
timeSchedules: [
'Tuesday 6:00-7:00',
'Thursday 6:00-7:00',
],
),
Ballet(
balletName: "Beginning Ballet",
timeSchedules: [
'Wednesday 3:45-4:45',
'Friday 3:45-4:45',
],
),
Ballet(
balletName: "Jazz Ballet",
timeSchedules: [
'Thursday 4:00-5:00',
],
)
];
class TimeSelection extends StatefulWidget {
#override
_TimeSelectionState createState() => _TimeSelectionState();
}
class _TimeSelectionState extends State<TimeSelection> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Column(
children: [
Text('hello there', style: Theme.of(context).textTheme.headline4),
ElevatedButton(child: Text('Register Here',), onPressed: () {},),
],
),
),
Expanded(
child: ListView.builder(
itemCount: balletItems.length+1 ,
itemBuilder: (context, index){
if (index < balletItems.length) {
Ballet balletItem = balletItems[index];
return ListTile(leading: Checkbox(
value: balletItem.isSelected,
onChanged: (value) {
setState((){
balletItem.isSelected = value;
});
},),
title: Text(balletItem.balletName),
trailing: Icon(Icons.auto_awesome),
);}
else{
return Container(
margin: const EdgeInsets.symmetric(horizontal: 20.0),
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => SelectTimes(),));
},
child: Text('Select Times'),
),
);}
},
),
)
],
),
drawer: Drawer(),
appBar: AppBar(title: Text("Class Registration"),),
);
}
}
class SelectTimes extends StatefulWidget {
#override
_SelectTimesState createState() => _SelectTimesState();
}
class _SelectTimesState extends State<SelectTimes> {
List<Ballet> selectedBalletItems;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Select Times'),),
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: selectedBalletItems.length,
itemBuilder: (context, index) {
Ballet selectedBalletItem = selectedBalletItems[index];
return _listTile(selectedBalletItem);
},
),
),
ElevatedButton(child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("PayPal", style: Theme.of(context).textTheme.headline4,
),
),
onPressed: () {},)
],
),
)
);
}
Widget _listTile(Ballet selectedBalletItem) {
return ListTile(
title: Text(selectedBalletItem.balletName),
subtitle: Text(selectedBalletItem.description , style: Theme.of(context).textTheme.bodyText2.copyWith(color: Colors.grey[500])),
trailing: DropdownButton<String>(
value: selectedBalletItem.selectedTime,
items: selectedBalletItem.timeSchedules.map((timeSchedule) {
return DropdownMenuItem(value: timeSchedule, child: Text(timeSchedule));
} ).toList(),
onChanged: (value) {
setState(() {
selectedBalletItem.selectedTime = value;
});
},
)
);
}
#override
void initState() {
super.initState();
selectedBalletItems = balletItems.where((e) => e.isSelected).toList();
}
}

Open page two inside the body of page one using Cupertino Segmented Control

I am using Cupertino Segmente Control , I created a tab using three swings and assigned three widgets to the front page body. When selecting any of the tabs, it displays the body of the new widget. So far, everything works fine. Products are loaded inside each page, and when we select a product, it must go to the second page .The second page opens, but inside the body of the first page. If you help me, thank you very much
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int groohEntkhabi = 1;
final Map<int, Widget> logoBala = const <int, Widget>{
0: Text("کشاورزی" ,style: TextStyle(fontSize: 14),),
1: Text("خرید فروش" ,style: TextStyle(fontSize: 14),),
2: Text("رهن و اجاره" ,style: TextStyle(fontSize: 14),),
};
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
iconTheme: IconThemeData(color: Colors.blue),
//centerTitle: true,
title: Container(
child: Row(
children: [
Expanded(
child: CupertinoSegmentedControl(
padding: EdgeInsets.all(0.0),
groupValue: groohEntkhabi,
onValueChanged: (changeFromGroupValue) {
setState(() {
groohEntkhabi = changeFromGroupValue;
});
},
children: logoBala,
),
),
],
)
),
actions: [
IconButton(icon: Icon(Icons.search), onPressed: (){}),
],
),
drawer: MyDraver(),
bottomNavigationBar: MyBottomNavigation(),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {}, label: Text("ثبت رایگان آگهی",style: TextStyle(color: Colors.white),), icon:Icon(Icons.add,color: Colors.white,),backgroundColor: Colors.blue,
),
// floatingActionButton: FloatingActionButton(onPressed: (){
// // Navigator.of(context).push(MaterialPageRoute(
// // builder: (context) => Shoab()
// // ));
// },
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
// backgroundColor: Colors.deepOrange,
// child:Center(child: Text("ثبت رایگان آگهی")),),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body:
(
_childern(groohEntkhabi)
),
),
);
}
Widget _childern(index){
List<Widget> page_screen=[];
page_screen.add(_keshavarzi());
page_screen.add(kharidFroosh());
page_screen.add(_ejare());
return page_screen[index];
}
Widget kharidFroosh(){
return MaterialApp(
debugShowCheckedModeBanner: false,
localizationsDelegates: [
// ... app-specific localization delegate[s] here
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''), // farsi
],
home: ListView.builder(padding: EdgeInsets.only(top: 3.0,left: 3.0,right: 3.0),
itemBuilder: mycard_view1,itemCount: 5,));
}
Widget mycard_view1(BuildContext context ,int index){
String mogheiatt ="کوی ملا نفس";
String mogheiat = mogheiatt.length>14 ? mogheiatt.substring(0,14):mogheiatt;
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),),
elevation: 1.0,
//color: Colors.blue,
child: InkWell(
onTap: (){
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => Safhe2_kharid_froosh()));
},
child: Stack(
children: <Widget> [
Container(margin: EdgeInsets.fromLTRB(50.0, 5.0, 5.0, 5.5),
height: 160.0,
width: double.infinity,
decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20.0)),
child: Padding(
padding: EdgeInsets.fromLTRB(100.0,10.0,10.0,2.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text("فروش ویلایی",style: TextStyle(fontFamily: "shabnammedium",fontSize: 15.0),),
SizedBox(
height: 7.0,
),
Text("قیمت : 850 م تومان",style: TextStyle(fontFamily: "shabnammedium",fontSize: 15.0),),
SizedBox(
height: 7.0,
),
Text("متراژ : 85 متر ",style: TextStyle(fontFamily: "shabnammedium",fontSize: 15.0),),
SizedBox(
height: 30.0,
),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(color: Color(0xffe1f5fe),borderRadius: BorderRadius.circular(10.0),),
child: Center(child: Padding(
padding: EdgeInsets.only(left: 3.0,right: 3.0),
child: Row(
children: [
Text("روز پیش",style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),),
Text("5",style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),),
],
),
)),
// width: 70.0,
),
Container(
child: Row(
children: [
Text("...",style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),),
Text(mogheiat,style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
//width: 100.0,
),
],
),
],
),
),
),
Positioned(
left: 10.0,
top: 5.0,
bottom: 5.0,
child: ClipRRect(borderRadius: BorderRadius.circular(15.0),
child:Image.asset("images/home.jpg",width: 130,fit: BoxFit.cover,),
),
),
],
),
),
);
}
Widget _keshavarzi(){
return Keshavarzi();
}
Widget _ejare(){
return Ejare();
}
}
this is my images app
this is my secend page inside a first page body
and this my first pages

TabView expand to bottom of the page

When ever I run the following code, I receive the error: A RenderFlex overflowed by 99523 pixels on the bottom.. I have tried various fixes to error like putting expanded widgets as children of the TabView and other combinations but none seems to work. I am trying to achieve the picture below. I have seen various solutions where the TabView widget is wrapped in an expanded widget but nothing is working.
below is my current code.
class Discover extends StatefulWidget {
#override
_DiscoverState createState() => _DiscoverState();
}
class _DiscoverState extends State<Discover> {
final _auth = FirebaseAuth.instance;
String request;
FirebaseUser loggedInUser;
#override
void initState() {
// TODO: implement initState
super.initState();
getCurrentUser();
}
void getCurrentUser () async {
try{
final user = await _auth.currentUser();
if (user != null){
loggedInUser = user;
print(loggedInUser.email);
}
} catch (e){
print(e);
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kSnow,//Color(0xffDCE3E5),
appBar: AppBar(
backgroundColor: kSnow,
leading: IconButton(
icon: Icon(Icons.menu),
iconSize: 30.0,
color: kOnyx,
onPressed: () {},
),
elevation: 0.0,
actions: <Widget>[
FlatButton.icon(
icon: Icon(
Icons.person,
color: kOnyx,
size: 30.0,
),
label: Text('Log Out'),
onPressed: () {
_auth.signOut();
Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
},
),
],
),
body: Column(
children: <Widget>[
Container(
color: kSnow,
padding: EdgeInsets.only(left: 15.0, top: 15.0, bottom: 30.0),
child: FractionallySizedBox(
widthFactor: 1.0,
child: Text(
'DISCOVER',
style: TextStyle(
color: kOnyx,
fontSize: 30.0,
//fontWeight: FontWeight.w600,
fontFamily: 'Baukasten'),
),
),
),
DefaultTabController(
length: 4,
child: Column(
children: <Widget>[
TabBar(
isScrollable: true,
labelColor: kOnyx,
unselectedLabelColor: kFossil,
indicatorSize: TabBarIndicatorSize.label,
indicator: BoxDecoration(
color: kSnow),
tabs: [Tab(text: 'HOME'), Tab(text: 'CREATE'), Tab(text: 'PROFILE'), Tab(text: 'SETTINGS')],
indicatorColor: kOnyx,
labelStyle: TextStyle(
//ntSize: 10.0,
fontFamily: 'Baukasten'
),
),
TabBarView(
children: <Widget>[
Text('hello'),
Text('hello'),
Text('hello'),
Text('hello')
],
)
],
),
),
//Container(height: 45, color: kOnyx,),
],
),
);
}
}
current ouput:

The widget causing the overflow was the nested Column which was given an unbounded height, I added a demo code using yur widget tree as an example.
Check below:
class Discover extends StatefulWidget {
#override
_DiscoverState createState() => _DiscoverState();
}
class _DiscoverState extends State<Discover> with SingleTickerProviderStateMixin {
final _auth = FirebaseAuth.instance;
String request;
FirebaseUser loggedInUser;
// create a tab controller
TabController _tabController;
#override
void initState() {
// create a tab controller
_tabController = TabController(length: 4, vsync: this);
// TODO: implement initState
super.initState();
getCurrentUser();
}
void getCurrentUser () async {
try{
final user = await _auth.currentUser();
if (user != null){
loggedInUser = user;
print(loggedInUser.email);
}
} catch (e){
print(e);
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kSnow,//Color(0xffDCE3E5),
appBar: AppBar(
backgroundColor: kSnow,
leading: IconButton(
icon: Icon(Icons.menu),
iconSize: 30.0,
color: kOnyx,
onPressed: () {},
),
elevation: 0.0,
actions: <Widget>[
FlatButton.icon(
icon: Icon(
Icons.person,
color: kOnyx,
size: 30.0,
),
label: Text('Log Out'),
onPressed: () {
_auth.signOut();
Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
},
),
],
),
body: Column(
children: <Widget>[
Container(
color: kSnow,
padding: EdgeInsets.only(left: 15.0, top: 15.0, bottom: 30.0),
child: FractionallySizedBox(
widthFactor: 1.0,
child: Text(
'DISCOVER',
style: TextStyle(
color: kOnyx,
fontSize: 30.0,
//fontWeight: FontWeight.w600,
fontFamily: 'Baukasten'),
),
),
),
DefaultTabController(
length: 4,
child: TabBar(
controller: _tabController,
isScrollable: true,
labelColor: kOnyx,
unselectedLabelColor: kFossil,
indicatorSize: TabBarIndicatorSize.label,
indicator: BoxDecoration(color: kSnow),
tabs: [
Tab(text: 'HOME'),
Tab(text: 'CREATE'),
Tab(text: 'PROFILE'),
Tab(text: 'SETTINGS')
],
indicatorColor: kOnyx,
labelStyle: TextStyle(
//ntSize: 10.0,
fontFamily: 'Baukasten'),
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Text('hello'),
Text('hello'),
Text('hello'),
Text('hello')
],
),
),
//Container(height: 45, color: kOnyx,),
],
),
);
}
}
OUTPUT:
Note, I used different colors as I could not get your exact colors: