[플러터] 11. login 위젯 정리

Home Page

Logo

        SvgPicture.asset(
          "assets/logo.svg",
          width: 70,
          height: 70,
        )

Text

        Text(
          "$title",
          style: TextStyle(
            fontSize: 40,
            fontWeight: FontWeight.bold,
          ),
        )

Button

    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black,
        fixedSize: Size(
          double.infinity,
          60,
        ),
      ),
      onPressed: submit,
      child: Text(
        "$name",
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );

Login Page

Logo

        SvgPicture.asset(
          "assets/logo.svg",
          width: 70,
          height: 70,
        )

Text

            MLogo("Login"),
            // HomePage 쪽에서 이미 작업해둔 코드가 있어서 재활용. (컴포넌트화 시켰음)
            // 파라미터만 받아서 적어주면 아래처럼 나옴

InPutTag

      decoration: InputDecoration(
        hintText: "enter $name",
        // 1. 기본 디자인
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        // 2. 포커스 디자인 (입력 상태에 들어갔을 때 디자인 동일하게)
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        // 3. 에러 디자인
        errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        // 4. 에러 포커스 디자인
        focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      )

Login Button

    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black,
        fixedSize: Size(
          double.infinity,
          60,
        ),
      ),
      onPressed: submit,
      child: Text(
        "$name",
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );

로그인 버튼을 눌렀을 때 값 넘겨받기

import 'package:flutter/material.dart';

class MButton extends StatelessWidget {
  String name;
  var submit;

  MButton(this.name, this.submit);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black,
        fixedSize: Size(
          double.infinity,
          60,
        ),
      ),
      onPressed: submit,
      child: Text(
        "$name",
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_login2/component/m_button.dart';
import 'package:flutter_login2/component/m_text_field.dart';
import 'package:flutter_login2/size.dart';

class MForm extends StatelessWidget {
  TextEditingController _username = TextEditingController();
  TextEditingController _password = TextEditingController();

  void submit(BuildContext context) {
    var requestBody = {
      "username": _username.text,
      "password": _password.text,
    };
    print("전송할 데이터 : $requestBody");

    Navigator.pushNamed(context, "/home");
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch, // 이걸 걸면 안에가 쫙 늘어남
        children: [
          MTextField("username", _username),
          SizedBox(height: sGap),
          MTextField("password", _password, isPassword: true),
          SizedBox(height: mGap),
          MButton("Login", () => {submit(context)}),
        ],
      ),
    );
  }
}

홈 페이지로 이동 완료