有没有办法在同一路线上以不同的方式显示两个小部件，一次由一个按钮控制？答案

【问题标题】：Is there a way for display two widget differently in same routeat different time controlled by one button at a time?有没有办法在同一路线上以不同的方式显示两个小部件，一次由一个按钮控制？
【发布时间】：2019-08-21 10:27:04
【问题描述】：

我正在实现一个登录界面，用户不必在注册或登录的页面/路由之间切换，而是保持相同的页面/路由，但登录和注册的内容会发生变化，那么登录时如何控制登录内容点击注册时点击和注册。

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

【问题讨论】：

标签： dart flutter flutter-layout dart-pub flutter-dependencies

【解决方案1】：

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")));
  }
}

输出：

【讨论】：