fluttertextstyle

increase textsize on button press flutter


I am new to flutter and i am trying a simple function ..
i have a page with a text and a raised button i want to increase the text size by 1.0 each time the button is pressed .. i have tried this but it is not working ..

class _StoryDetailsState extends State<StoryDetails> {
@override
Widget build(BuildContext context) {
var textSize = 10.0;

return Scaffold(
  backgroundColor: Color(0xffEA3A82),
  appBar: AppBar(
    elevation: 0.0,
    backgroundColor: Color(0xffEA3A82),
    title: Text(widget.story_title),
  )
  ,body: SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Align(
          alignment: Alignment.topLeft
          ,child: Image.network(widget.story_detail_pic , width: double.infinity,)
      ),

      RaisedButton(
        child: Text('enlarge text'),
        onPressed: (){
          setState(() {
            textSize = textSize + 1.0;
            print(textSize); 
          });
        },
      ),
      Padding(
        padding: const EdgeInsets.all(10.0),
        child: ClipRRect(borderRadius: BorderRadius.circular(10)
            ,child: Container(color: Colors.white.withOpacity(0.6) ,child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(widget.story , style: TextStyle(fontSize: textSize),),
            ))),
      )
    ],
  ),
),
);
 } 
}

Solution

  • The problem is that you are declaring textsize inside of build method. Every time set state is called the build method is called and your textsize is set to 10 again. Just move var textSize = 10.0; outside of build method and it will work fine.

    class _StoryDetailsState extends State<StoryDetails> {
      var textSize = 10.0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color(0xffEA3A82),
          appBar: AppBar(
            elevation: 0.0,
            backgroundColor: Color(0xffEA3A82),
            title: Text("Title"),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Align(
                    alignment: Alignment.topLeft,
                    child: Image.network(
                      "http://via.placeholder.com/640x360",
                      width: double.infinity,
                    )),
                RaisedButton(
                  child: Text('enlarge text'),
                  onPressed: () {
                    textSize = textSize + 1.0;
                    print(textSize);
                    setState(() {});
                  },
                ),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                          color: Colors.white.withOpacity(0.6),
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              "story",
                              style: TextStyle(fontSize: textSize),
                            ),
                          ))),
                )
              ],
            ),
          ),
        );
      }
    }