Reputation: 6368
I have bottom navigation bar that switches between two screens BookingsScreen
and OpeningTimesScreen
. My problem is that OpeningTimesScreen
UI doesn't load properly the first time. It does load if tap on its icon again or if I select BookingsScreen
first and then select it.
As the full UI is quite crowded with 28 textfields and 14 switches, I just reduced it to only one textfield and did some tests.
It seems that the problem is with textfield declared inside a ternary, thing that I do as the app runs on web and on tablets..
If I declare the textfield as Column's direct child UI builds correctly.
TextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
),
If I declare it in an expanded widget UI still builds correctly.
Expanded(
flex: 1,
child: TextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
),
),
If I declare it without checkin platform UI still builds correctly.
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
//title row
children: <Widget>[
Expanded(
flex: 2,
child: Text(
AppLocalizations.instance.text('Monday'),
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 2,
child: TextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
),
),
],
),
),
When I do perform the platform checking then I get the error and a grey screen at first load only. Once you tap on the BottomNavigationBar icon again it loads fine.
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
//title row
children: <Widget>[
Expanded(
flex: 2,
child: Text(
AppLocalizations.instance.text('Monday'),
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 2,
child: Platform.isIOS
? CupertinoTextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
)
: TextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
),
),
From Chrome console I see the Another exception was thrown: Instance of 'ErrorSummary'
with js_primitives.dart:47
link.
Clicking it opens a tab with this:
Could not load content for org-dartlang-sdk:///lib/_internal/js_runtime/lib/js_primitives.dart (HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)
..I also have another error when app starts and I don't know if they're related..
favicon.ico:1 GET http://localhost:5000/favicon.ico 404 (Not Found)
What can I check to see what's causing it? As always thank you very much for your time and help.
I also put the entire class :
class OpeningTimesScreen extends StatefulWidget {
final FixitUser user;
final LatLng coordinates;
final String cityDb;
final String regionDb;
final String countryDb;
const OpeningTimesScreen(
{Key key,
@required this.user,
@required this.coordinates,
@required this.cityDb,
@required this.regionDb,
@required this.countryDb})
: super(key: key);
@override
_OpeningTimesScreenState createState() => _OpeningTimesScreenState();
}
// TODO expanded causes error : Another exception was thrown: Instance of 'ErrorSummary'
class _OpeningTimesScreenState extends State<OpeningTimesScreen> {
TextEditingController monMorOp = TextEditingController();
@override
Widget build(BuildContext context) {
return BlocProvider<OpeningTimesBloc>(
lazy: false,
create: (BuildContext context) =>
OpeningTimesBloc()..add(LoadOpeningTimes(widget.user)),
child: BlocConsumer<OpeningTimesBloc, OpeningTimesState>(
listener: (BuildContext context, OpeningTimesState state) {},
builder: (context, state) => Container(
color: Colors.black54,
padding: EdgeInsets.symmetric(horizontal: 100, vertical: 50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// TODO titles
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 2,
child: Text(
'',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 2,
child: Text(
AppLocalizations.instance.text('Opening'),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 2,
child: Text(
AppLocalizations.instance.text('Closing'),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 1,
child: Text(
AppLocalizations.instance.text('Active'),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 40,
),
Expanded(
flex: 2,
child: Text(
AppLocalizations.instance.text('Opening'),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 2,
child: Text(
AppLocalizations.instance.text('Closing'),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 1,
child: Text(
AppLocalizations.instance.text('Active'),
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
],
),
),
// TODO UI builds without a problem
// TextField(
// keyboardType: TextInputType.numberWithOptions(),
// controller: monMorOp,
// onChanged: (value) {
// monMorOp.text = validateTimeFormat(value);
// },
// ),
// TODO UI builds without a problem
// Expanded(
// flex: 1,
// child: TextField(
// keyboardType: TextInputType.numberWithOptions(),
// controller: monMorOp,
// onChanged: (value) {
// monMorOp.text = validateTimeFormat(value);
// },
// ),
// ),
// TODO UI builds without a problem
// TODO monday
// Expanded(
// flex: 1,
// child: Row(
// mainAxisAlignment: MainAxisAlignment.center,
// mainAxisSize: MainAxisSize.max,
// //title row
// children: <Widget>[
// Expanded(
// flex: 2,
// child: Text(
// AppLocalizations.instance.text('Monday'),
// style: TextStyle(color: Colors.white, fontSize: 20),
// ),
// ),
// SizedBox(
// width: 20,
// ),
// Expanded(
// flex: 2,
// child: TextField(
// keyboardType: TextInputType.numberWithOptions(),
// controller: monMorOp,
// onChanged: (value) {
// monMorOp.text = validateTimeFormat(value);
// },
// ),
// ),
// ],
// ),
// ),
// TODO UI build problem
// TODO monday
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
//title row
children: <Widget>[
Expanded(
flex: 2,
child: Text(
AppLocalizations.instance.text('Monday'),
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
width: 20,
),
Expanded(
flex: 2,
child: Platform.isIOS
? CupertinoTextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
)
: TextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
),
),
],
),
),
],
),
),
),
);
}
Upvotes: 3
Views: 5280
Reputation: 6368
Found the problem.
As the first thing it get checked is a dart.io library it throws an exception..
Adding a first check kISWeb solved it. I actually thought that failing the Platform.isIOS check automatically unfolded in the other option for web as well, but it needs its own check ..
Expanded(
flex: 2,
child: kIsWeb
? TextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
)
: Platform.isIOS
? CupertinoTextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
)
: TextField(
keyboardType: TextInputType.numberWithOptions(),
controller: monMorOp,
onChanged: (value) {
monMorOp.text = validateTimeFormat(value);
},
),
),
Hope it helps others. Cheers
Upvotes: 2