How do I increase size of text whilst a button is pressed?

Question

I am concentrating on adding accessibility features to my app. The first one is to increase/reduce the size of text using pinch and zoom gestures along with buttons. I have done this on my drawer, but it doesn't continue to increase, or decrease the size of the text whilst the buttons are pressed. Currently the user will have to press the button multiple times.

I have tried onLongPressed, which seems to act the same way as onTap. I have also tried onTapDown which gives me an error.

Here is my code.

class _MapDrawerState extends State<MapDrawer> {
    double _fontSize = 16.0;
    final double _baseFontSize = 16.0;
    double _fontScale = 1.0;
    double _baseFontScale = 1.0;
    double _maxScale = 2.2;
    @override
    Widget build(BuildContext context) {
        return GestureDetector(
            onScaleStart: (ScaleStartDetails scaleStartDetails) {
                _baseFontScale = _fontScale;
            },
            onScaleUpdate: (ScaleUpdateDetails scaleUpdateDetails) {
                setState(() {
                  _fontScale =
                      (_baseFontScale * scaleUpdateDetails.scale).clamp(1.0, _maxScale);
                  _fontSize = _fontScale * _baseFontSize;
                });
              },
              child: SizedBox(
                width: MediaQuery.of(context).size.width * 0.85, //
                child: Drawer(
                  child: ListView(
                    // Important: Remove any padding from the ListView.
                    padding: EdgeInsets.zero,
                    children: <Widget>[
                      DrawerHeader(
                        child: Image.asset('assets/imgs/sliding_bar/whiteLogo.png'),
                        decoration: BoxDecoration(
                          color: Theme.UniColour.primary[900],
                        ),
                        margin: EdgeInsets.only(bottom: 0),
                      ),
                      _buildFontSizeButtons(),
                      Divider(),
                      ListTile(
                        title: Text(
                          AppLocalizations.of(context).drawerResidences,
                          style: TextStyle(fontSize: _fontSize),
                        ), // AppLocalizations.of(context).drawerResidences
                        trailing: Image.asset('assets/imgs/sliding_bar/home2.png'),
                        onTap: () {
                          // TODO: Show Student Residences Markers.
                          //Navigator.pop(context);
                        },
                      ),

                    ],
                  ),
                ),
              ),
            );
          }

          Widget _buildFontSizeButtons() {
            return Row(children: <Widget>[
              _buildReduceFontSizeIcon(),
              _buildIncreaseFontSizeIcon(),
            ]);
          }

          Widget _buildReduceFontSizeIcon() {
            return Expanded(
              child: Opacity(
                opacity: 0.60,
                child: Container(
                  padding: EdgeInsets.all(7.0),
                  decoration: BoxDecoration(
                    color: Theme.UniColour.secondary[200],
                    border:
                        Border.all(color: Theme.UniColour.tertiary[500], width: 1.0),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black,
                        offset: Offset(0.0, 0.0),
                        blurRadius: 1.0,
                      ),
                    ],
                  ),
                  child: InkWell(
                    onTap: () {
                      print("REDUCE FONT-SIZE ICON PRESSED");
                      setState(() {
                        if (_fontSize > _baseFontSize) {
                          _fontSize--;
                        }
                      });
                    },
                    onLongPress: () {
                      print("REDUCE FONT-SIZE ICON LONG PRESSED");
                      setState(() {
                        if (_fontSize > _baseFontSize) {
                          _fontSize--;
                        }
                      });
                    },
                    child: Icon(
                      Icons.zoom_out,
                      color: Colors.black87,
                      size: 36.0,
                    ),
                  ),
                ),
              ),
            );
          }

          Widget _buildIncreaseFontSizeIcon() {
            return Expanded(
              child: Opacity(
                opacity: 0.60,
                child: Container(
                  padding: EdgeInsets.all(7.0),
                  decoration: BoxDecoration(
                    color: Theme.UniColour.secondary[200],
                    border:
                        Border.all(color: Theme.UniColour.tertiary[500], width: 1.0),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black,
                        offset: Offset(0.0, 0.0),
                        blurRadius: 1.0,
                      ),
                    ],
                  ),
                  child: InkWell(
                    onTap: () {
                      print("INCREASE FONT-SIZE ICON PRESSED");
                      setState(() {
                        if (_fontSize < _baseFontSize * _maxScale) {
                          _fontSize++;
                        }
                      });
                    },
                    onLongPress: () {
                      print("INCREASE FONT-SIZE ICON LONG PRESSED");
                      setState(() {
                        if (_fontSize < _baseFontSize * _maxScale) {
                          _fontSize++;
                        }
                      });
                    },
                    child: Icon(
                      Icons.zoom_in,
                      color: Colors.black87,
                      size: 36.0,
                    ),
                  ),
                ),
              ),
            );
          }
        }

How would I be able to change the text size whilst the buttons are pressed?

If anybody know how to increase/decrease the size of form fields, then that would be amazing.

Any help is appreciated.

This can help you out https://stackoverflow.com/questions/55440184/how-to-pinch-zoom-in-out-text-using-two-fingers — shubhgkr, Feb 06 '20 at 13:11

score 1 · Answer 1 · answered Feb 06 '20 at 13:38

This example should do what you expect:

class TextIncreaseIssue extends StatefulWidget {
  @override
  _TextIncreaseIssueState createState() => _TextIncreaseIssueState();
}

class _TextIncreaseIssueState extends State<TextIncreaseIssue> {
  double textFontSize = 12;
  Timer _fontTimer;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text('My text',
            style: TextStyle(fontSize: textFontSize),
          ),
          GestureDetector(
            onTapDown: (details) => _tapIncreaseFontSize(),
            onLongPressStart: (details) => _startIncreaseFontSize(),
            onLongPressEnd: (details) => _stopIncreaseFontSize(),
            child: Container(
              alignment: Alignment.center,
              color: Colors.lightBlue,
              height: 60,
              width: 100,
              child: Text('Increase font'),
            ),
          ),
        ]
      ),
    );
  }

  void _tapIncreaseFontSize(){
    setState(() {
      textFontSize++;
    });
  }

  void _startIncreaseFontSize(){
    _fontTimer = Timer.periodic(Duration(milliseconds: 100), (timer) {
      setState(() {
        textFontSize++;
      });
    });
  }

  void _stopIncreaseFontSize(){
    _fontTimer.cancel();
  }
}

How do I increase size of text whilst a button is pressed?

1 Answers1