[Flutter/Project](Instagram Clone) Positioned(), RichText(TextSpan()), FlatButton(shape:)

---

 

---

소스코드 및 pubspec.yaml

// screens/auth_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/widgets/fade_stack.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  // index
  int selectedForm = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            FadeStack(
              selectedForm: selectedForm,
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              height: 45,
              // 높이를 정해줘야 FlatButton의 shape:이 잘 맞음.
              child: Container(
                color: Colors.white,
                child: FlatButton(
                  // 버튼 상단 회색 선
                  shape: Border(top: BorderSide(color: Colors.grey)),
                  onPressed: () {
                    setState(() {
                      if (selectedForm == 0)
                        selectedForm = 1;
                      else
                        selectedForm = 0;
                    });
                  },
                  child: RichText(
                    text: TextSpan(
                        text: selectedForm == 0
                            ? "Already have an account? "
                            : "Don't have an account? ",
                        style: TextStyle(
                            color: Colors.grey, fontWeight: FontWeight.bold),
                        children: [
                          TextSpan(
                            text: selectedForm == 0 ? "Sign In" : "Sing Up",
                            style: TextStyle(color: Colors.blue),
                          ),
                        ]),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}