Bill Tertis
Reputation: 207
i have 3 screens when i get back to my first screen its broken,black Flutter/Dart
https://i.sstatic.net/T0Wri.jpg there is a video and here is my full code of these screens:
there is a video and here is my full code of these screens:
there is a video and here is my full code of these screens:
there is a video and here is my full code of these screens:
there is a video and here is my full code of these screens:
Screen one:
class AccountPage extends StatelessWidget {
late AppController appController;
AccountPage(appController){
this.appController = appController;
}
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left:10),
height: this.appController.queryData.size.height * (2/30),
child: Text(AppLocalizations.of(context)!.accsett,
style: TextStyle(color: this.appController.themeController.thirdAppDeepColor,
fontSize: 26 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
Container(
height: 1,
color: this.appController.themeController.appGreyColor,
),
this.appController.loggedIn ?
Container(
padding: EdgeInsets.only(left: 5),
height: this.appController.queryData.size.height * (1.5/30),
child: ElevatedButton(
child:
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.account_circle),
Container(
padding: EdgeInsets.only(left: 10),
child: Text(AppLocalizations.of(context)!.profile,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
],
),
style: ButtonStyle(
elevation: this.appController.themeController.evTransparentButtonElevation as MaterialStateProperty<double?>,
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide.none,
),
),
padding: MaterialStateProperty.resolveWith<EdgeInsets>(
(Set<MaterialState> states) {
return EdgeInsets.symmetric(horizontal: 5);
},
),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.thirdAppDeepColor;
},
),
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.secondAppLightColor;
},
),
shadowColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => new ProfilePage(appController)),
);
},
)
)
:
Container(
padding: EdgeInsets.only(left: 5, top:10 ),
height: this.appController.queryData.size.height * (2/30),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.only(left: 10),
child: Text(AppLocalizations.of(context)!.please,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000),
color: this.appController.themeController.thirdAppDeepColor,
),
),
),
Container(
padding: EdgeInsets.only(left: 10),
height: this.appController.queryData.size.height * (2/30),
child: ElevatedButton(
child:
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.login),
Container(
padding: EdgeInsets.only(left: 10),
child: Text(AppLocalizations.of(context)!.login,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
],
),
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
side: BorderSide.none,
),
),
padding: MaterialStateProperty.resolveWith<EdgeInsets>(
(Set<MaterialState> states) {
return EdgeInsets.symmetric(horizontal: 5);
},
),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return this.appController.themeController.thirdAppDeepColor;
else
return this.appController.themeController.appWhiteDeepColor;
},
),
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.secondAppLightColor;
},
),
shadowColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.thirdAppDeepColor;
},
),
),
onPressed: () {
this.appController.logOut(context);
},
)
),
],
),
),
:
Container()
)
:
Container(
padding: EdgeInsets.only(left: 5, top:10 ),
height: this.appController.queryData.size.height * (2/30),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.only(left: 10),
child: Text(AppLocalizations.of(context)!.to_use_acc_sett,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000),
color: this.appController.themeController.thirdAppDeepColor,
),
),
),
],
),
),
(this.appController.loggedIn && appController.userContract != null) ?
Container(
padding: EdgeInsets.only(left: 5),
height: this.appController.queryData.size.height * (1.5/30),
child: ElevatedButton(
child:
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.fact_check),
Container(
padding: EdgeInsets.only(left: 10),
child: Text(AppLocalizations.of(context)!.bookings,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
],
),
style: ButtonStyle(
elevation: this.appController.themeController.evTransparentButtonElevation as MaterialStateProperty<double?>,
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide.none,
),
),
padding: MaterialStateProperty.resolveWith<EdgeInsets>(
(Set<MaterialState> states) {
return EdgeInsets.symmetric(horizontal: 5);
},
),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.thirdAppDeepColor;
},
),
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.secondAppLightColor;
},
),
shadowColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => new ShowBookingsPage(appController)),
);
},
)
)
:
Container(),
this.appController.loggedIn ?
Container(
padding: EdgeInsets.only(left: 5),
height: this.appController.queryData.size.height * (1.5/30),
child: ElevatedButton(
child:
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.electrical_services),
Container(
padding: EdgeInsets.only(left: 10),
child: Text(AppLocalizations.of(context)!.sessions,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
],
),
style: ButtonStyle(
elevation: this.appController.themeController.evTransparentButtonElevation as MaterialStateProperty<double?>,
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide.none,
),
),
padding: MaterialStateProperty.resolveWith<EdgeInsets>(
(Set<MaterialState> states) {
return EdgeInsets.symmetric(horizontal: 5);
},
),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.thirdAppDeepColor;
},
),
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.secondAppLightColor;
},
),
shadowColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
),
onPressed: () {
**Navigator.push(
context,
MaterialPageRoute(builder: (context) => new ShowSessionsPage(appController)),
);**
},
)
)
:
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left:10),
height: this.appController.queryData.size.height * (2/30),
child: Text(AppLocalizations.of(context)!.accsett,
style: TextStyle(color: this.appController.themeController.thirdAppDeepColor,
fontSize: 26 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
(this.appController.loggedIn && appController.userContract != null) ?
Container(
padding: EdgeInsets.only(left: 5),
height: this.appController.queryData.size.height * (1.5/30),
child: ElevatedButton(
child:
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.account_circle),
Container(
padding: EdgeInsets.only(left: 10),
child: Text('MyBill',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
],
),
style: ButtonStyle(
elevation: this.appController.themeController.evTransparentButtonElevation as MaterialStateProperty<double?>,
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide.none,
),
),
padding: MaterialStateProperty.resolveWith<EdgeInsets>(
(Set<MaterialState> states) {
return EdgeInsets.symmetric(horizontal: 5);
},
),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.thirdAppDeepColor;
},
),
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.secondAppLightColor;
},
),
shadowColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => new MyBillPage(appController)),
);
},
)
):
Container(),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left:10),
height: this.appController.queryData.size.height * (2/30),
child: Text(AppLocalizations.of(context)!.app_sett,
style: TextStyle(color: this.appController.themeController.thirdAppDeepColor,
fontSize: 26 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
Container(
height: 1,
color: this.appController.themeController.appGreyColor,
),
Container(
padding: EdgeInsets.only(left: 5),
height: this.appController.queryData.size.height * (1.5/30),
child: ElevatedButton(
child:
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.settings),
Container(
padding: EdgeInsets.only(left: 10),
child: Text(AppLocalizations.of(context)!.settings,
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.normal,
fontSize: 24 * this.appController.fontSizeFactorBasedOnOs * (this.appController.queryData.size.height/1000)),
),
),
],
),
style: ButtonStyle(
elevation: this.appController.themeController.evTransparentButtonElevation as MaterialStateProperty<double?>,
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide.none,
),
),
padding: MaterialStateProperty.resolveWith<EdgeInsets>(
(Set<MaterialState> states) {
return EdgeInsets.symmetric(horizontal: 5);
},
),
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.thirdAppDeepColor;
},
),
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return this.appController.themeController.secondAppLightColor;
},
),
shadowColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
),
onPressed: () {},
)
),
:
Container(),
],
);
}
}
Screen two:
class ShowSessionsPage extends StatefulWidget {
late final AppController appController;
ShowSessionsPage(appController) {
this.appController = appController;
}
_ShowSessionsPageState createState() => _ShowSessionsPageState();
}
class _ShowSessionsPageState extends State<ShowSessionsPage>{
List<SessionOrBookingPanel> sessionPanels = [];
bool sessionsLoaded = false;
@override
void initState() {
super.initState();
loadSessions();
}
void loadSessions() async {
if (await widget.appController.fetchChargeTransactions())
setState(() {
sessionsLoaded = true;
});
}
void createSessionPanels(List<dynamic> sessions) {
int i = 0;
sessionPanels.clear();
if (sessions.length != 0){
while (i < sessions.length){
sessionPanels.add(new SessionOrBookingPanel(sessions[i], widget.appController, true, true));
i++;
}
}
}
Widget build(BuildContext context) {
createSessionPanels(widget.appController.sessions);
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
leading: IconButton(
color: widget.appController.themeController.appBlackDeepColor,
tooltip: 'Back',
alignment: Alignment.centerLeft,
icon: (widget.appController.deviceIsAndroid) ? const Icon(Icons.arrow_back) : const Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AccountPage(widget.appController)),
);
},
),
title: Text(AppLocalizations.of(context)!.sessions,
style: TextStyle(color: widget.appController.themeController.appBlackDeepColor),),
elevation: 0.0,
),
body: sessionsLoaded ?
Column(
children: [ ElevatedButton(child: Text('Open Callendar'),
onPressed: () => {Navigator.push(
context,
MaterialPageRoute(builder: (context) => new Calendar(widget.appController)),
)}),
Expanded(
flex: 15,
child: Container(
margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
child: ListView.separated(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
scrollDirection: Axis.vertical,
itemBuilder: (_, index) => sessionPanels[index],
separatorBuilder: (context, index) => Divider(color: Colors.transparent,),
itemCount: sessionPanels.length),
),
),
],
)
:
Center(
child: CircularProgressIndicator(),
),
);
}
}
Screen three:
class Calendar extends StatelessWidget {
late AppController appController;
Calendar(appController){
this.appController = appController;
} // This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(appController),
);
}
}
class MyHomePage extends StatefulWidget {
late AppController appController;
MyHomePage(appController){
this.appController = appController;
}
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
DateRangePickerController _datePickerController = DateRangePickerController();
@override
Widget build(BuildContext context) {
print(widget.appController.list);
return Scaffold(
appBar: AppBar(
title:Text('My Calendar'),
leading: IconButton(
color: widget.appController.themeController.appWhiteLightColor,
tooltip: 'Back',
alignment: Alignment.centerLeft,
icon: (widget.appController.deviceIsAndroid) ? const Icon(Icons.arrow_back) : const Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ShowSessionsPage(widget.appController)),
);
},
),
),
body: SfDateRangePicker(
navigationDirection: DateRangePickerNavigationDirection.vertical,
navigationMode: DateRangePickerNavigationMode.scroll,
view: DateRangePickerView.month,
monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 6,
specialDates:widget.appController.specialDates),
monthCellStyle: DateRangePickerMonthCellStyle(
specialDatesDecoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: const Color(0xFF2B732F), width: 1),
shape: BoxShape.circle),
blackoutDateTextStyle: TextStyle(color: Colors.white, decoration: TextDecoration.lineThrough),
specialDatesTextStyle: const TextStyle(color: Colors.white),
),
selectionMode: DateRangePickerSelectionMode.multiple,
onSelectionChanged: _onSelectionChanged,
controller: _datePickerController,
onCancel: () {
_datePickerController.selectedRanges = null;
},
),
);
}
}
Upvotes: 1
Views: 81
Answers (1)
hossam mohammad
Reputation: 56
As I see it isn't broken, you aren't wrapping it with a Scaffold Widget.
The problem here, at first you are using Account Page as a child of BottomNavigationBar Widget, so it takes its parent from it, but the second time you are navigating to it as a separate page and here it doesn't have a Scaffold Widget as a parent, so it isn't styled / organized.
- All you need to do is to navigate to it as a child of the
BottomNavigationBarWidget by only changing the index of it, like this:
set State ((){ _currentIndex = newIndex;});
or using a state management such as: (Provider - Riverpod - Get-x - Bloc....etc).
hope I could help.
Upvotes: 1
Related Questions
- White blank screen is displayed when I run my flutter app
- FLUTTER How do I get rid of "FATAL EXCEPTION: ScreenDecorations"?
- Why I get a white screen ? Flutter
- App loads a wrong screen before loading the correct screen
- flutter iOS has white screen
- Going Back is showing Black Screen in Flutter
- Flutter black screen when switching to other screen
- Black screen with circle in the middle
- App is working fine but when app starts suddenly shows up this screen and disappear
- Flutter UI is broken first screen