How to have text size as a variable that increases/decreases with a button press?
typescript
Ethan JacksonI am trying to have my text size change with the click of a button by 3 font sizes. One button is for increase and the other is for decrease. I need to keep them within custom widgets to keep the files separated as demonstrated below. I don't get any error messages when executing, but the font size doesn't change.
main.dart
import 'package:flutter/material.dart';
import '/button.dart';
import '/words.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
State<StatefulWidget> createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
String text = 'Dynamic text!';
double textSize = 15.0;
void answerQuestion(choice) {
setState(() {
text = choice;
print(text);
});
}
void increaseTextSize(choice) {
setState() {
textSize + 3.0;
textSize = choice;
}
}
void decreaseTextSize(choice) {
setState() {
textSize - 3.0;
textSize = choice;
}
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Homework 05'),
),
body: Column(children: [
Question(),
Button(answerQuestion, 'Increase!', increaseTextSize,
'Dynamic Text'),
Button(answerQuestion, 'Decrease!', decreaseTextSize,
'Dynamic Text'),
Answer(textSize)
])));
}
}
button.dart
import 'package:flutter/material.dart';
class Button extends StatelessWidget {
Function chooser1;
String title;
Function chooser2;
String textOutcome;
Button(this.chooser1, this.title, this.chooser2, this.textOutcome);
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: ElevatedButton(
child: Text(title),
onPressed: () => [chooser1(textOutcome), chooser2(textOutcome)]));
}
}`
words.dart
import 'package:flutter/material.dart';
class Question extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: Text(
'Change the size!',
style: TextStyle(fontSize: 28),
textAlign: TextAlign.center,
));
}
}
class Answer extends StatelessWidget {
double textSize;
Answer(this.textSize);
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: Text(
'Dynamic Text!',
style: TextStyle(fontSize: textSize),
textAlign: TextAlign.center,
));
}
}
I have tried creating two separate button classes but that didn't work either.
Answer
There are many syntax errors in your code, here is the code after I fixed it.
class MyAppState extends State<MyApp> {
String text = 'Dynamic text!';
double textSize = 15.0;
void answerQuestion(String choice) {
setState(() {
text = choice;
print(text);
});
}
void increaseTextSize(String choice) {
setState(() {
textSize += 3.0;
text = choice;
});
}
void decreaseTextSize(String choice) {
setState(() {
textSize -= 3.0;
text = choice;
});
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Homework 05'),
),
body: Column(children: [
Question(),
Button(answerQuestion, 'Increase!', increaseTextSize,
'Dynamic Text'),
Button(answerQuestion, 'Decrease!', decreaseTextSize,
'Dynamic Text'),
Answer(textSize)
])));
}
}
class Button extends StatelessWidget {
ValueChanged<String> chooser1;
String title;
ValueChanged<String> chooser2;
String textOutcome;
Button(this.chooser1, this.title, this.chooser2, this.textOutcome);
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: ElevatedButton(
child: Text(title),
onPressed: () => [chooser1(textOutcome), chooser2(textOutcome)]));
}
}