Show Widget after an action in Flutter - 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.

Answer 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'))
],
);
}
}

Answer 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.

Answer 3

Here's a very simple code sample on how to do it using the Visibility widget.
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
#override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
bool showForgotPassword = false;
#override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
controller: emailController,
),
TextField(
controller: passwordController,
),
Visibility(
child: Text("Forgot Password?"),
visible: showForgotPassword,
),
RaisedButton(
child: Text("Log in"),
onPressed: () {
// Validate password
if (passwordController.text != 'realpassword') {
setState(() {
showForgotPassword = true;
});
} else {
// continue
}
},
),
],
);
}
}
When we click the login button with the wrong password. We change the visible property of the Visibility widget to true. Hence, the password text becomes visible.
If we type the correct password, then the visible property of the Visibility widget becomes false. Hence, the text becomes invisible.
OUTPUT
When they put the wrong password:
When they put the correct password: