Im creating a flutter app that requires a user to complete certain tasks in order to stop an alarm clock. Its a more imersive alarm clock app that could help stimulate the brain in order to aid in the process of waking up.
The tasks are simple questions the user has to answer. im utilizing TextFeild() to allow the user to input there answer. However when I go to debug my code im redirected to a file called "box.dart" this is where the error is stated.
Here is the box.dart file error:
throw FlutterError.fromParts(<DiagnosticsNode>[
ErrorSummary('Cannot hit test a render box with no size.'),
describeForError('The hitTest() method was called on this RenderBox'),
ErrorDescription(
'Although this node is not marked as needing layout, '
'its size is not set.',
),
ErrorHint(
'A RenderBox object must have an '
'explicit size before it can be hit-tested. Make sure '
'that the RenderBox in question sets its size during layout.',
),
]);
}
Here is my full code:
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
//import 'package:audioplayers/audio_cache.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Time Attack',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Time Attack'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
final player = AudioCache();
//bool isPLaying = false;
await player.load('musicForapp.mp3');
AudioPlayer p = AudioPlayer();
p.audioCache = player;
await p.play(AssetSource('musicForapp.mp3'));
},
backgroundColor: Colors.red,
child: const Icon(Icons.punch_clock),
),
body: Padding(
padding: const EdgeInsets.all(170),
child: Column(
children: [
const Text(
"Click the Icon in the bottem right to simulate alarm",
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const TasksPage(),
),
);
}, //on pressed
child: const Text(
"Tasks page",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
);
} //widget build
}
class TasksPage extends StatefulWidget {
const TasksPage({super.key});
@override
State<TasksPage> createState() => _TasksPageState();
}
class _TasksPageState extends State<TasksPage> {
final _textcontroller = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Tasks'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const SecondTask(),
),
);
},
backgroundColor: Colors.red,
child: const Text("Next"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Text(
"How many states are there in the Uninted States of America?",
style: TextStyle(
backgroundColor: Colors.white,
color: Colors.black,
fontSize: 30.0,
),
),
TextField(
controller: _textcontroller,
decoration: InputDecoration(
hintText: "Type your answer here!",
border: const OutlineInputBorder(),
suffixIcon: IconButton(
onPressed: () {
_textcontroller.clear();
},
icon: const Icon(Icons.clear),
),
),
),
],
),
),
),
),
);
} //widget build
}
class SecondTask extends StatefulWidget {
const SecondTask({super.key});
@override
State<SecondTask> createState() => _SecondTask();
}
class _SecondTask extends State<SecondTask> {
final _textcontroller2 = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Tasks'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const Thirdtask(),
),
);
},
backgroundColor: Colors.red,
child: const Text("Next"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Text(
"how many oceans are there?",
style: TextStyle(
backgroundColor: Colors.white,
color: Colors.black,
fontSize: 30.0,
),
),
TextField(
controller: _textcontroller2,
decoration: InputDecoration(
hintText: "Type your answer here!",
border: const OutlineInputBorder(),
suffixIcon: IconButton(
onPressed: () {
_textcontroller2.clear();
},
icon: const Icon(Icons.clear),
),
),
),
],
),
),
),
),
);
} //widget build
}
class Thirdtask extends StatefulWidget {
const Thirdtask({super.key});
@override
State<Thirdtask> createState() => _Thirdtask();
}
class _Thirdtask extends State<Thirdtask> {
final _textcontroller3 = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Tasks'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const Finaltask(),
),
);
},
backgroundColor: Colors.red,
child: const Text("Next"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Text(
"What is 8 x 7?",
style: TextStyle(
backgroundColor: Colors.white,
color: Colors.black,
fontSize: 30.0,
),
),
TextField(
controller: _textcontroller3,
decoration: InputDecoration(
hintText: "Type your answer here!",
border: const OutlineInputBorder(),
suffixIcon: IconButton(
onPressed: () {
_textcontroller3.clear();
},
icon: const Icon(Icons.clear),
),
),
),
],
),
),
),
),
);
} //widget build
}
class Finaltask extends StatefulWidget {
const Finaltask({super.key});
@override
State<Finaltask> createState() => _Finaltask();
}
class _Finaltask extends State<Finaltask> {
final _textcontroller4 = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Tasks'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const Congrats(),
),
);
},
backgroundColor: Colors.red,
child: const Text("Submit"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Text(
"Riddle: What goes up but never comes back down?",
style: TextStyle(
backgroundColor: Colors.white,
color: Colors.black,
fontSize: 30.0,
),
),
TextField(
controller: _textcontroller4,
decoration: InputDecoration(
hintText: "Type your answer here!",
border: const OutlineInputBorder(),
suffixIcon: IconButton(
onPressed: () {
_textcontroller4.clear();
},
icon: const Icon(Icons.clear),
),
),
),
],
),
),
),
),
);
} //widget build
}
class Congrats extends StatefulWidget {
const Congrats({super.key});
@override
State<Congrats> createState() => _Congrats();
}
class _Congrats extends State<Congrats> {
final _textcontroller4 = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Good Job!'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const MyHomePage(),
),
);
//player.clear('explosion.mp3'); (to stop alarm)
},
backgroundColor: Colors.red,
child: const Text("Home"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Text(
"Congratulations you completed your tasks, Click the home button to return home and stop the timer!",
style: TextStyle(
backgroundColor: Colors.white,
color: Colors.black,
fontSize: 30.0,
),
),
],
),
),
),
),
);
} //widget build
}
CodePudding user response：
the error itself already explains the answer. But let me add some more just in case you haven't encountered this yet. I saw from your code that your text field is inside a Row. And if a textfield is inside a row, you have to give an explicit width by wrapping it with SizedBox and supplying the width according to your need. otherwise, your textfield doesn't know how to size itself so it will complain.
CodePudding user response：
Just Wrap a container around the textfields that has a fixed width like :
Container(
width : 200,
child : TextField(
controller: _textcontroller4,
decoration: InputDecoration(
hintText: "Type your answer here!",
border: const OutlineInputBorder(),
suffixIcon: IconButton(
onPressed: () {
_textcontroller4.clear();
},
icon: const Icon(Icons.clear),
),
),
),)