How to change text status as soon as a button is pressed in Flutter SDK and Dart.

To explain this I am going to use a simple code that update a text widget when ever a button is pressed.

You may know there are two classes, actually three, those are

1. Stateless Widget
2. Stateful Widget
3. Inherited Widget

Stateless Widget is immutable and when we want to change something that displaying we need to create new one.

Stateful Widget is mutable and can interact with users. When we want to redraw/ change something that displaying we need to use this widget. To use this widget we need two classes. And to redraw the display we have a method call setState().

Inherited Widget is mix of both of above.

I think now you understand what is the widget that we need to use for this situation. It is stateful widget. You guess it right?

So here is the complete code, and I'll explain it one by one.

	import 'package:flutter/material.dart';
	void main() => runApp(new MyApp());
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return new MaterialApp(
	title: 'Converter App',
	theme: new ThemeData(
	primarySwatch: Colors.blue,
	),
	home: new Scaffold(
	appBar: new AppBar(
	title: new Text('Converter App'),
	),
	body: new Center(
	child: new Converter(),
	),
	)
	);
	}
	}
	class Converter extends StatefulWidget {
	@override
	_ConverterWidget createState() => new _ConverterWidget();
	}
	class _ConverterWidget extends State<Converter> {
	String value = "click Me";
	@override
	Widget build(BuildContext context) {
	return new Column(
	children: <Widget>[
	new Text(value),
	new RaisedButton(
	child: new Text('Click me'),
	onPressed: () {
	setState(() {
	value += ' Me';
	});
	},
	),
	],
	);
	}
	}

view raw change_text.dart hosted with ❤ by GitHub