Show Widget after an action in Flutter

Question

What is the best way to show a widget after an action? In my case, I want to show the Text Forgot Password? after the user misses the login credentials so he get's the option for reset password or to be sent his password through email. Picture1:

And the second picture after the user missed the password, an action triggers and the Forgot Password appears:

I've thought of using AnimatedOpacity() but not sure if this is the right approach. Thanks in advance for the advice.

Solution 1

This is a minimal working code, that delivers the message. You can use setState.

in your stateful widget.

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  TextEditingController _email = TextEditingController();
  TextEditingController _password = TextEditingController();
  bool _forgotPassword = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _email,
        ),
        TextField(
          controller: _password,
        ),
        _forgotPassword 
            ? TextButton(
                onPressed: () async {
                  //await your logic for forgotton password
                },
                child: Text('Forgot Password'))
            : Container(),
        TextButton(
            onPressed: () async {
              //await your login logic, if it returns false\error\not authenticated, then you can change the state of _forgotPassword, and then shows 'forgot password TextButton'
              setState(() {
                _forgotPassword = true;
              });
            },
            child: Text('Login'))
      ],
    );
  }
}

Solution 2

You can use state management to show or hide any widget on any action. See the example below, read the explanation in the inline comment.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget{
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  bool showcard = false; //set widget show to false

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title:Text("Show widget on action"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
        body: Container(
          child: Column(children: [
              
              showcard?Container( //check if showcard is true or false
                child: Card(
                  child: Padding( 
                    padding: EdgeInsets.all(20),
                    child:Text("This is card widget")
                  )
                )
              ):Container(),
              //if showcard is true then show card, else show empty contianer.

              Container( 
                child: ElevatedButton( 
                  child: Text(showcard?"Hide Card":"Show Card"),
                  onPressed: (){
                    setState(() { //update UI with setState
                        if(showcard){
                            showcard = false; 
                            //if showcard is true, then make it false to hide
                        }else{
                            showcard = true;
                            //if showcard is false, then make it true to show.
                        }
                    });
                  },
                )
              )

          ],)    
        )
    );
  }
}

In this example, there is raised button, when you click on it, the card will appear, and there will be "hide" button, and when you click on it, the card will disappear, or vice versa.

Output:

Card widget after pressing "show card" button.

Comments

[Huthaifa Muayyad]

Please post your code snippet so it can modified and edited in no time, instead of writing columns and widgets for your question.

[GrandMagus]

Thanks for the help mate, I will test it some more within my project and make it as an accepted answer, but this seems exactly what I had in mind. :) Cheers!

[Huthaifa Muayyad]

You're most welcome, come back for more help anytime.