Flutter show widget when fixed password is correct

Question

I want to show a Image.asset() to the user, but before it is displayed, he must know a fixed password like Password1234, which he should write in a TextField() or something, and if his input in the text field is equal to the fixed password, he should be able to see it. Any ideas?

Answer 1

Check this out,let me know if it works for you

 class _MyHomePageState extends State<MyHomePage> {
   //For entering password

      TextEditingController _passcontroller = TextEditingController();
      
      //Default password set as 1234 

     String defaultPassword = "1234";

     //For visibility widget it is set to false
      bool _isVisible = false;
    
      @override
      void initState() {
        super.initState();
        _passcontroller = TextEditingController();
      }
    
      @override
      void dispose() {
        _passcontroller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Center(
                  child: TextField(
                    controller: _passcontroller,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: 'Password',
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        textStyle: const TextStyle(fontSize: 20)),
                    onPressed: () {
                        showWidget(_passcontroller.text);
                    },
                    child: const Text('Submit'),
                  ),
                ),
                Visibility(
                  visible: _isVisible,
                   child: Image.network('https://picsum.photos/250?image=9'),
                ),
              ],
            ),
          ),
        );
      }
  
      Future<void> showWidget(String password_text) async{
        
           //Checking if the enterd password is equal to default 
                    // password if both matches change the _isVisible to true so 
                       //your widget will show
        
                      if (password_text == defaultPassword) {
                        setState(() {
                          _isVisible = !_isVisible;
                        });
                      }else {
                    final snackBar = SnackBar(content:Text('Incorrect Password'));

                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                  }
      }
}

Answer 2

This can be easily achieved using the Visibility widget and setState() method. Please have a look at these tools.