RenderCustomMultiChildLayoutBox object was given an infinite size during layout - flutter

Question

This is what show up on my terminal:
======== Exception caught by rendering library ===================================================== The following assertion was thrown during performLayout(): RenderPhysicalModel object was given an infinite size during layout.
This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that
allows its children to pick their own size. The nearest ancestor
providing an unbounded height constraint is:
_RenderSingleChildViewport#4c3d2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ... needs compositing ... parentData: (can use size) ... constraints: BoxConstraints(w=1366.0, h=657.0) ... size: MISSING ... offset: Offset(0.0, -0.0) The constraints that applied to the RenderPhysicalModel were: BoxConstraints(0.0<=w<=1366.0,
0.0<=h<=Infinity) The exact size it was given was: Size(1366.0, Infinity)
This is my code:
import 'dart:core';
import 'dart:ui';
import 'package:braintrinig/animation/LongBreak.dart';
import 'package:braintrinig/animation/ShortBreak.dart';
import 'package:braintrinig/animation/StartPomodoro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'dart:async';
import 'package:responsive_sizer/responsive_sizer.dart';
class HomePageTimerUI extends StatefulWidget {
const HomePageTimerUI( {Key? key}) : super(key: key);
#override
State<HomePageTimerUI> createState() => _HomePageTimerUIState();
}
class _HomePageTimerUIState extends State<HomePageTimerUI>
with SingleTickerProviderStateMixin {
final ScrollController _firstController = ScrollController();
late TabController _tabController;
late Timer timer;
late AnimationController controller;
String get countText {
Duration count = controller.duration! * controller.value;
return controller.isDismissed
? '${controller.duration!.inHours.toString().padLeft(2, '0')}:${(controller.duration!.inMinutes % 60).toString().padLeft(2, '0')}:${(controller.duration!.inSeconds % 60).toString().padLeft(2, '0')}'
: '${count.inHours.toString().padLeft(2, '0')}:${(count.inMinutes % 60).toString().padLeft(2, '0')}:${(count.inSeconds % 60).toString().padLeft(2, '0')}';
}
#override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
void notify() {
if (countText == '00:00:00') {}
}
#override
Widget build(BuildContext context) {
return ResponsiveSizer(builder: (context, orientation, screenType) {
return Device.screenType == ScreenType.mobile
? Container(
width: double.infinity,
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
bottom: PreferredSize(
preferredSize: Size.fromHeight(55),
child: Container(
color: Colors.transparent,
child: SafeArea(
child: Column(
children: <Widget>[
TabBar(
controller: _tabController,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
color: Color(0xff3B3B3B),
width: 4.0),
insets: EdgeInsets.fromLTRB(
12.0, 12.0, 12.0, 11.0)),
indicatorWeight: 15,
indicatorSize: TabBarIndicatorSize.label,
labelColor: Color(0xff3B3B3B),
labelStyle: TextStyle(
fontSize: 12,
letterSpacing: 1.3,
fontWeight: FontWeight.w500),
unselectedLabelColor: Color(0xffD7D7D7),
tabs: [
Tab(
text: "POMODORO",
icon:
Icon(Icons.work_history, size: 40),
),
Tab(
text: "SHORT BREAK",
icon:
Icon(Icons.ramen_dining, size: 40),
),
Tab(
text: "LONG BREAK",
icon: Icon(
Icons.battery_charging_full_rounded,
size: 40),
),
])
],
),
),
),
),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
Center(
child: StartPomodoro(),
),
Center(
child: ShortBreak(),
),
Center(child: LongBreak()),
],
),
bottomNavigationBar: Container(
height: 110,
color: Color(0xffFAFAFA),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15.0, vertical: 20),
child: GNav(
iconSize: 40,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
backgroundColor: Color(0xffFAFAFA),
color: Color(0xffD7D7D7),
activeColor: Color(0xff3B3B3B),
tabBackgroundColor: Color(0xffF0F0F0),
gap: 8,
onTabChange: (index) {
print(index);
},
padding: EdgeInsets.all(15),
tabs: [
GButton(
icon: Icons.settings,
text: 'Settings',
),
GButton(
icon: Icons.person,
text: "Profile",
),
GButton(
icon: Icons.task,
text: "Tasks",
),
GButton(
icon: Icons.show_chart,
text: "Performance",
),
],
),
),
),
)))
: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: Column(
children: [
SizedBox(
width: constraints.maxWidth,
height: constraints.maxHeight,
child: Scrollbar(
thumbVisibility: true,
controller: _firstController,
child: ListView.builder(
controller: _firstController,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Container(
height: constraints.maxHeight,
width: double.infinity,
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
bottom: PreferredSize(
preferredSize: Size.fromHeight(55),
child: Container(
color: Colors.transparent,
child: SafeArea(
child: Column(
children: <Widget>[
TabBar(
controller:
_tabController,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
color: Color(
0xff3B3B3B),
width: 4.0),
insets: EdgeInsets
.fromLTRB(
12.0,
12.0,
12.0,
11.0)),
indicatorWeight: 15,
indicatorSize:
TabBarIndicatorSize
.label,
labelColor:
Color(0xff3B3B3B),
labelStyle: TextStyle(
fontSize: 12,
letterSpacing: 1.3,
fontWeight:
FontWeight.w500),
unselectedLabelColor:
Color(0xffD7D7D7),
tabs: [
Tab(
text: "POMODORO",
icon: Icon(
Icons
.work_history,
size: 40),
),
Tab(
text: "SHORT BREAK",
icon: Icon(
Icons
.ramen_dining,
size: 40),
),
Tab(
text: "LONG BREAK",
icon: Icon(
Icons
.battery_charging_full_rounded,
size: 40),
),
])
],
),
),
),
),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
Center(
child: StartPomodoro(),
),
Center(
child: ShortBreak(),
),
Center(child: LongBreak()),
],
),
bottomNavigationBar: Container(
height: 110,
color: Color(0xffFAFAFA),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15.0, vertical: 20),
child: GNav(
iconSize: 40,
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
backgroundColor: Color(0xffFAFAFA),
color: Color(0xffD7D7D7),
activeColor: Color(0xff3B3B3B),
tabBackgroundColor:
Color(0xffF0F0F0),
gap: 8,
onTabChange: (index) {
print(index);
},
padding: EdgeInsets.all(15),
tabs: [
GButton(
icon: Icons.settings,
text: 'Settings',
),
GButton(
icon: Icons.person,
text: "Profile",
),
GButton(
icon: Icons.task,
text: "Tasks",
),
GButton(
icon: Icons.show_chart,
text: "Performance",
),
],
),
),
),
)));
}),
),
),
SizedBox(
child: Scaffold(
backgroundColor: const Color(0xffF6F6F6),
body: TextSelectionTheme(
data: TextSelectionTheme.of(context).copyWith(
selectionColor: Color(0xffD7D7D7),
cursorColor: Color(0xff3B3B3B),
selectionHandleColor: Color(0xffD7D7D7),
),
child: Center(
child: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
const Center(
child: Text(
"Your email",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
const SizedBox(height: 20,),
const Center(
child: SizedBox(
width: 350,
child: TextField(
cursorColor: Color(0xff3B3B3B),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffD7D7D7)),
),
),
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.none,
decorationStyle: TextDecorationStyle.dotted,
decorationColor: Color(0xffF6F6F6),
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
),
const SizedBox(
height: 110,
),
const Center(
child: Text(
"Your password",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
const SizedBox(
height: 20,
),
const SizedBox(
height: 110,
),
GestureDetector(
onTap: () {
print("arrow clicked");
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (_) => HomePageTimerUI()));
},
child: Container(
child: Center(
child: Icon(
Icons.arrow_forward,
size: 40,
color: Color(0xff7E7E7E),
),
),
),
)
],
),
),
),
),
),
),
)
],
),
);
}) ;
});
}
}
How to solve this issue?
Thank you in advance for your help, I really appreciate it, and hope you have a great day

Answer 1

Remove width : double.infinity
It will try to create a container of infinite width which will work if the parent widget has bounds