I’ll describe how to add an input section to a mobile app in Flutter in this article. So, for this blog, I’m going to open main.dart in the VS Code editor, create a programme, and import

“package:flutter/material.dart” import

Next, I construct a headline like “Happy Journey” using StatelessWidget, a theme, and the primarySwatch colour blue for the theme. Then, I make a button using RaisedButton and an input area with the aid of InputDecoration decoration, adding a few stylistic classes, and using the variable “myvar” for the shown text. The entire code is listed below:

	import "package:flutter/material.dart";
	void main() {
	runApp(myapp());
	}
	// stateless visit
	class myapp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Happy Journey',
	theme: ThemeData(
	primarySwatch: Colors.blue,
	),
	home: MyHomePage(),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	// varible for display inpt text in upside
	String myvar;
	String changeDisp = "Default";
	void showText() {
	setState(() {
	changeDisp = myvar;
	});
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
	Text(
	"$changeDisp",
	),
	Padding(
	padding: const EdgeInsets.all(20.0),
	child: TextField(
	onChanged: (text) {
	myvar = text;
	},
	// maxLength: 50,
	// maxLines: 3,
	decoration: InputDecoration(
	// hintText: 'Username',
	labelText: 'Username',
	prefixIcon: Icon(Icons.account_circle),
	// helperText: 'Username',
	border: OutlineInputBorder()),
	style: TextStyle(
	color: Colors.blue,
	fontSize: 15,
	// backgroundColor: Colors.red,
	),
	),
	),
	RaisedButton(
	color: Colors.red,
	onPressed: showText,
	child: Text(
	"Click",
	style: TextStyle(
	color: Colors.white,
	)
	),
	),
	],
	),
	);
	}
	}

view raw gistfile1.txt hosted with by GitHub

In is Functionality When you type in input section then show input section word in default value which is assign upper side of Input like that below image.