How to change text in Flutter (Dart)?

Question

I'm new to Flutter! I want to change the content of "Text" on click and Button "change Text" see the following code:

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}
class MyHomePage extends StatelessWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Center(
              child: Text("App demo",
                  style: TextStyle(color: Colors.yellow, fontSize: 40))),
        ),
        body:Center(
          child: Column(children: [
            Text("Hello word !", key: Key("textKey")),
            TextButton(child: Text("change Text"), onPressed: (){
              /* **I want to change "Hello word!" to "Text has changed"** */
              debugPrint("Change");
            },),
          ],),
        )
      ),
    );
  }
}

Please show me how to do it? thanks, everyone.

Does this answer your question? Flutter change text when button pressed — Midhun MP
– Midhun MP, Commented Sep 20, 2021 at 6:39

Jahidul Islam · Accepted Answer · 2021-09-20 06:39:47Z

0

You need to extend with a stateful widget if you want to change the text. In stateless, it can't rebuild, so you must go with the stateful widget or state management like(bloc, provider, getx etc)

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home: MyHomePage()));
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key key,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String helloWorld = "Hello word !";
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Center(
                child: Text("App demo",
                    style: TextStyle(color: Colors.yellow, fontSize: 40))),
          ),
          body:Center(
            child: Column(children: [
              Text("$helloWorld", key: Key("textKey")),
              TextButton(child: Text("change Text"), onPressed: (){
                /* **I want to change "Hello word!" to "Text has changed"** */
                debugPrint("Change");
                setState(() {
                  helloWorld = "Change text";

                });
              },),
            ],),
          )
      ),
    );
  }
}

answered Sep 20, 2021 at 6:39

Jahidul Islam

12.7k3 gold badges20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jahidul Islam Over a year ago

please mak it as answer, and also try to type english, Happy coding!

AnhTuan Over a year ago

the current way solved my problem, but i want to ask more can we use "Find Widgets" to make this request?

AnhTuan Over a year ago

flutter.dev/docs/cookbook/testing/widget/finders

Jahidul Islam Over a year ago

you can write testing using find widgets

Collectives™ on Stack Overflow

How to change text in Flutter (Dart)?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related