How to have text size as a variable that increases/decreases with a button press?

How to have text size as a variable that increases/decreases with a button press?

I 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)]));
  }
}

Enjoyed this question?

Check out more content on our blog or follow us on social media.

Browse more questions