Is there a way for display two widget differently in same routeat different time controlled by one button at a time?

Issue

I am implementing a login interface where users do not have to switch between page/route for signup or login but remain the same page/route but the content change for login and signup, so how can control the content for login when login clicked and for signup when signup clicked.

Image to understand: https://i.stack.imgur.com/Fhwdt.png

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          // primarySwatch: Colors.white,
          ),
      home: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Container(
              //  height: MediaQuery.of(context).size.height,
              //  width: MediaQuery.of(context).size.width,
              height: 500.0,
              width: 400.0,
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 80.0,
                  ),
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        child: Text("Logo"),
                        backgroundColor: Colors.blue,
                      ),
                      Text("Slogan")
                    ],
                  ),
                  SizedBox(
                    height: 40.0,
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      RaisedButton(
                        onPressed: () {
                          setState(() {
                            login = true;
                          });
                        },
                        child: Text("SignUp"),
                      ),
                      SizedBox(
                        width: 20.0,
                      ),
                      RaisedButton(
                        onPressed: () {
                          setState(() {
                            login = false;
                          });
                        },
                        child: Text("Login"),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
                  login ? Signup() : new Login(),
                  // new FragmentB()
                ],
              ),
            )
          ],
        ),
      ),
    );
  }


class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.purple,
    );
  }
}

class Signup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
    );
  }
}

Solution

void main() => runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("Title")), body: HomePage())));

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

class _HomePageState extends State<HomePage> {
  bool _isLogin = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(child: _isLogin ? SignupPage() : LoginPage()),
        Center(
          child: RaisedButton(
            child: Text("Switch to ${_isLogin ? "Login" : "Sign up"}"),
            onPressed: () => setState(() => _isLogin = !_isLogin),
          ),
        ),
        Spacer(),
      ],
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue, child: Center(child: Text("Login page")));
  }
}

class SignupPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.teal, child: Center(child: Text("Sign up page")));
  }
}

Output:

enter image description here

Answered By – CopsOnRoad

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.