How do I put a button in a block in flutter? - flutter

Question

Used expanded, container. Does not work. I tried to put the Elevated Button in Expanded. And all the time that child can't use something else. Most likely, I don't quite understand the structure. I tried to put the Elevated Button in Expanded.
import 'package:percent_indicator/percent_indicator.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: Pomodoro(),
));
}
class Pomodoro extends StatefulWidget {
const Pomodoro({Key? key}) : super(key: key);
#override
State<Pomodoro> createState() => _PomodoroState();
}
class _PomodoroState extends State<Pomodoro> {
double percent = 0;
// ignore: non_constant_identifier_names, unused_field
static int TimeInMinut = 25;
// ignore: non_constant_identifier_names
int TimeInSec = TimeInMinut = 60;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xff1542bf), Color(0xff51a8ff)],
begin: FractionalOffset(0.5, 1)),
),
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 25.0),
child: Text(
'Pomodoro Clock',
style: TextStyle(color: Colors.white, fontSize: 40.0),
),
),
Expanded(
child: SizedBox(
height: 20.0,
width: 50.0,
child: CircularPercentIndicator(
percent: percent,
animation: true,
animateFromLastPercent: true,
radius: 90.0,
lineWidth: 20.0,
progressColor: Colors.white,
center: Text(
'$TimeInMinut',
style: const TextStyle(
color: Colors.white, fontSize: 30.0),
),
),
),
),
Expanded(
child: Container(
width: double.infinity,
decoration: const BoxDecoration(
color: Color.fromARGB(255, 163, 48, 48),
borderRadius: BorderRadius.only(
topRight: Radius.circular(30.0),
topLeft: Radius.circular(30.0)),
),
child: Padding(
padding: const EdgeInsets.only(
top: 30.0, left: 20.0, right: 20.0),
child: Row(
children: [
Expanded(
child: Column(
children: const [
Text(
'Study Time',
style: TextStyle(
fontSize: 30.0,
),
),
SizedBox(
height: 10.0,
),
Text(
'25',
style: TextStyle(
fontSize: 80.0,
),
),
],
),
),
Expanded(
child: Column(
children: const [
Text(
'Pause Timer',
style: TextStyle(
fontSize: 30.0,
),
),
Text(
'5',
style: TextStyle(
fontSize: 80.0,
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Text(
'hello',
),
))
],
),
),
],
),
),
),
),
Container(
padding: const EdgeInsets.symmetric(vertical: 0.0),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0),
),
),
child: const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
'start studing',
style: TextStyle(color: Colors.white, fontSize: 22.0),
),
),
),
),
]),
),
),
);
}
}

Answer 1

If you like to use Expanded on Text(hello) widget. You need to get constrains from top level/parent widget, but this is not the solution you like to archive.
I will recommend checking /layout/constraints
As for the answer, you need to wrap Row widget Column to place another child just after the row widget. It could be skipped if you we had same color as background.
import 'package:percent_indicator/percent_indicator.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: Pomodoro(),
));
}
class Pomodoro extends StatefulWidget {
const Pomodoro({Key? key}) : super(key: key);
#override
State<Pomodoro> createState() => _PomodoroState();
}
class _PomodoroState extends State<Pomodoro> {
double percent = 0;
// ignore: non_constant_identifier_names, unused_field
static int TimeInMinut = 25;
// ignore: non_constant_identifier_names
int TimeInSec = TimeInMinut = 60;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xff1542bf), Color(0xff51a8ff)],
begin: FractionalOffset(0.5, 1)),
),
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 25.0),
child: Text(
'Pomodoro Clock',
style: TextStyle(color: Colors.white, fontSize: 40.0),
),
),
Expanded(
child: SizedBox(
height: 20.0,
width: 50.0,
child: CircularPercentIndicator(
percent: percent,
animation: true,
animateFromLastPercent: true,
radius: 90.0,
lineWidth: 20.0,
progressColor: Colors.white,
center: Text(
'$TimeInMinut',
style: const TextStyle(
color: Colors.white, fontSize: 30.0),
),
),
),
),
Expanded(
child: Container(
width: double.infinity,
padding: const EdgeInsets.only(
top: 30.0, left: 20.0, right: 20.0),
decoration: const BoxDecoration(
color: Color.fromARGB(255, 163, 48, 48),
borderRadius: BorderRadius.only(
topRight: Radius.circular(30.0),
topLeft: Radius.circular(30.0)),
),
child: Column(
children: [
Row(
children: [
Expanded(
child: Column(
children: const [
Text(
'Study Time',
style: TextStyle(
fontSize: 30.0,
),
),
SizedBox(
height: 10.0,
),
Text(
'25',
style: TextStyle(
fontSize: 80.0,
),
),
],
),
),
Column(
children: const [
Text(
'Pause Timer',
style: TextStyle(
fontSize: 30.0,
),
),
Text(
'5',
style: TextStyle(
fontSize: 80.0,
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Text(
'hello',
),
)
],
),
],
),
Container(
height: 100,
width: 200,
padding: const EdgeInsets.symmetric(vertical: 0.0),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0),
),
),
child: const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
'start studing',
style: TextStyle(
color: Colors.white, fontSize: 22.0),
),
),
),
),
],
),
),
),
]),
),
),
);
}
}