How To Show And Hide Text Field Input Using Flutter

admin_img Posted By Bajarangi soft , Posted On 06-11-2020

In flutter there is a specific widget named as Visibility which is used hide any given child widget using Boolean true false values. We can easily maintain Boolean value using State. Sometimes app developer wants to hide ListView or any other components like Text, Container, TextField etc on button click event. So in this tutorial we would Show Hide Text Container View Widget programmatically on Button Click in Flutter Android iOS app.

How To Show And Hide Text Field Input Using Flutter

Show and Hide Text Field Input
Complete Code For Show and Hide Text Field Input In Flutter
main.dart

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TextEditingController _textFieldController = TextEditingController();
  bool _isTextFieldVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
        title: Text('Show and Hide - TextField'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            _isTextFieldVisible
                ? Padding(
              //Add padding around textfield
              padding: EdgeInsets.symmetric(horizontal: 25.0),
              child: TextField(
                controller: _textFieldController,
                decoration: InputDecoration(
                  hintText: "Enter Username",
                ),
              ),
            )
                : SizedBox(),
            SizedBox(
              height: 25.0,
            ),
            RaisedButton(
              color: Colors.pink,
              textColor: Colors.white,
              child: Text(_isTextFieldVisible ? "Hide" : "Show"),
              onPressed: () {
                setState(() => _isTextFieldVisible = !_isTextFieldVisible);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Related Post