Flutter Input Box with Input Event Example Tutorial

Flutter , Android Studio

Nicesnippets

176

13-07-2020


Hi Guys,

In this blog, I will explain you how to create input box with input event in flutter. You can easily create input box with input event in flutter.First i will import package:flutter/material.dart

, after I will make Input Box using Container in TextField in flutter.

In flutter we use Input Box widget to get input in alphanumeric characters from application user. Input Box allows app user to enter some data in application. TextField is most commonly used to build application input forms where developer needs to ask multiple type of information from user. So in this tutorial we would Create Text Input TextField Widget in Flutter Android iOS App With Example Tutorial.

Here, I will give you full example for simply display input box with input event using flutter as bellow.

Step 1 - Import material.dart package in your app’s main.dart file

import 'package:flutter/material.dart';

Step 2 - Call our main MyApp class using void main run app function.

void main() => runApp(MyApp());

Step 3 - Create our main widget class named as MyApp extends with State less widget.

class MyApp extends StatelessWidget {

}

Step 4. Create Scaffold widget -> Center widget -> Column widget in Widget build area in class.

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children:[]

)

)

)

);

}

}

Step 5 - Create a Container widget then put the TextField widget inside it. We are doing this because TextField did not support width and height directly.

Container(

width: 300,

child: TextField(

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: 'Enter Name Here',

hintText: 'Enter Name Here',

),

autofocus: false,

)

)

Step 6 - Complete source code for main.dart file

In this step, You will open main.dart and Create a Container widget then put the TextField widget inside it. We are doing this because TextField did not support width and height directly.

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Nicesnippets',

theme: ThemeData(

primarySwatch: Colors.red,

visualDensity: VisualDensity.adaptivePlatformDensity,

),

home: MyHomePage(title: 'Welcome to Nicesnippets'),

);

}

}

class MyHomePage extends StatefulWidget {

@override

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

_State createState() => _State();

}

class _State extends State {

TextEditingController nameController = TextEditingController();

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Welcome to Nicesnippets'),

),

body: Padding(

padding: EdgeInsets.all(10),

child: ListView(

children: [

Container(

alignment: Alignment.center,

padding: EdgeInsets.all(10),

margin: const EdgeInsets.only(top: 50),

child: Text(

'Input Box',

style: TextStyle(

color: Colors.red,

fontWeight: FontWeight.w500,

fontSize: 30),

)),

Container(

padding: EdgeInsets.all(10),

child: TextField(

controller: nameController,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: 'User Name',

),

),

),

Container(

height: 50,

padding: EdgeInsets.fromLTRB(10, 0, 10, 0),

child: RaisedButton(

textColor: Colors.white,

color: Colors.red,

child: Text('Button'),

onPressed: () {

print(nameController.text);

},

)),

],

)));

}

}

Output

It will help you...