Flutter 로그 인 페이지 개발
로그 인 점프 를 보 여주 기 위해 분류 탐색 에서 간단 한 단 추 를 누 르 고 로그 인 페이지 로 이동 합 니 다.실제 앱 에 서 는 로그 인해 야 볼 수 있 는 동작 을 터치 한 후 로그 인 화면 으로 이동 하 는 경우 가 많 습 니 다.
레이아웃 분석
화면 은 위의 그림 에서 보 듯 이 화면 에서 볼 때 전체 내용 구역 이 가운데 에 있 고 내용 의 구 조 는 간단 한 열 식 구조 로 상단 의 로고(보통 App 아이콘)를 포함 하고 아래 는 두 텍스트 입력 상자 이 며 마지막 은 로그 인 버튼 입 니 다.전체 레이아웃 이 간단 합 니 다.Center 에 Column 을 삽입 하여 열 레이아웃 을 하면 됩 니 다.
그림 원형 재단
Flutter 에서 그림 원형 재단 을 실시 하 는 방법 은 두 가지 가 있 는데 하 나 는 바깥쪽 용 기 를 사용 하고 정사각형 을 원형 으로 재단 하면 된다.둘 째 는 내 장 된 CircleAvatar 를 사용 하 는 것 이다.그러나 이름 상 CircleAvatar 는 두상 에 사용 되 기 때문에 용기 의 것 을 사용 하여 원형 재단 을 실현 한다.원형 그림 을 가 져 오 는 방법getRoundImage 는 그림 자원 의 이름과 정사각형 변 의 길 이 를 전달 합 니 다.코드 는 다음 과 같 습 니 다.
Widget _getRoundImage(String imageName, double size) {
return Container(
width: size,
height: size,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(size / 2)),
),
child: Image.asset(
imageName,
fit: BoxFit.fitWidth,
),
);
}
원형 평면 버튼
여기 서 언급 해 야 할 것 은 Flutter 2.0 이전의 평평 한 버튼 은 FlatButton 으로 사용 하기에 간단 하지만 만족 하지 않 는 경우 가 많아 2.0 이후 TextButton 대 체 를 도입 했다.TextButton 은 단추 스타일 을 장식 하기 위해 스타일 을 하나 더 만 들 었 습 니 다.구체 적 으로 는 공식 문 서 를 볼 수 있다.여기 서 우리 의 단 추 는 배경 색 을 테마 색 으로 설정 한 다음 단추 의 텍스트 색 을 흰색 으로 하고 원 각 으로 잘라 야 하기 때문에 Container 의 경계 원호 로 이 루어 집 니 다.주의해 야 할 것 은 기본 단추 의 너 비 는 내용 에 따라 이 루어 지기 때문에 단추 가 화면 을 가득 채 우기 위해 Container 의 너 비 를 double.infinity 로 설정 하 였 습 니 다.코드 는 다음 과 같다.
Widget _getLoginButton() {
return Container(
height: 50,
width: double.infinity,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(4.0),
),
child: TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor:
MaterialStateProperty.all<Color>(Theme.of(context).primaryColor),
),
child: Text(
' ',
),
onPressed: () {
print(
'Login: username=${_username.trim()}, password=${_password.trim()}');
},
),
);
}
TextField 텍스트 상자
TextField 는 Flutter 가 제공 하 는 텍스트 입력 상자 로 TextField 의 속성 이 매우 많 습 니 다.자주 사용 하 는 속성 은 다음 과 같 습 니 다.
코드 재 활용 성 을 높이 기 위해 일반적인 텍스트 상 자 를 가 져 오 는 방법 을 사 용 했 습 니 다.여 기 는 주로 Container 패 키 지 를 사용 하여 여백 과 텍스트 상자 의 구분자 선 을 제어 합 니 다.
Widget _getInputTextField(
TextInputType keyboardType, {
FocusNode focusNode,
controller: TextEditingController,
onChanged: Function,
InputDecoration decoration,
bool obscureText = false,
height = 50.0,
}) {
return Container(
height: height,
margin: EdgeInsets.all(10.0),
child: Column(
children: [
TextField(
keyboardType: keyboardType,
focusNode: focusNode,
obscureText: obscureText,
controller: controller,
decoration: decoration,
onChanged: onChanged,
),
Divider(
height: 1.0,
color: Colors.grey[400],
),
],
),
);
}
class _LoginPageState extends State<LoginPage> {
//TextEditingController text
TextEditingController _usernameController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
String _username = '', _password = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(' '),
brightness: Brightness.dark,
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_getRoundImage('images/logo.png', 100.0),
SizedBox(
height: 60,
),
_getUsernameInput(),
_getPasswordInput(),
SizedBox(
height: 10,
),
_getLoginButton(),
],
),
),
);
}
Widget _getUsernameInput() {
return _getInputTextField(
TextInputType.number,
controller: _usernameController,
decoration: InputDecoration(
hintText: " ",
icon: Icon(
Icons.mobile_friendly_rounded,
size: 20.0,
),
border: InputBorder.none,
// GestureDetector
suffixIcon: GestureDetector(
child: Offstage(
child: Icon(Icons.clear),
offstage: _username == '',
),
//
onTap: () {
this.setState(() {
_username = '';
_usernameController.clear();
});
},
),
),
// onChanged
onChanged: (value) {
this.setState(() {
_username = value;
});
},
);
}
Widget _getPasswordInput() {
return _getInputTextField(
TextInputType.text,
obscureText: true,
controller: _passwordController,
decoration: InputDecoration(
hintText: " ",
icon: Icon(
Icons.lock_open,
size: 20.0,
),
suffixIcon: GestureDetector(
child: Offstage(
child: Icon(Icons.clear),
offstage: _password == '',
),
onTap: () {
this.setState(() {
_password = '';
_passwordController.clear();
});
},
),
border: InputBorder.none,
),
onChanged: (value) {
this.setState(() {
_password = value;
});
},
);
}
//
}
상단 의 로그 인 버튼 에 클릭 이벤트 가 추가 되 었 습 니 다.클릭 한 후에 로그 인 페이지 로 넘 어 갑 니 다.버튼 의 응답 코드 는 다음 과 같 습 니 다.이것 은 페이지 를 뛰 어 넘 는 가장 간단 한 방식 이다.Navigator 네 비게 이 션 의 push 방법 으로 페이지 를 뛰 어 넘 는 것 을 실현 하고 나중에 경로 로 페이지 를 뛰 어 넘 는 방법 을 소개 할 것 이다.그런 방식 이 더욱 우아 하 다.
//...
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => LoginPage()),
);
},
//...
코드 로 볼 때 기능 은 실현 되 었 지만 사용자 이름과 비밀 번 호 를 구축 하 는 코드 는 매우 비슷 합 니 다.코드 재 활용 율 을 높이 고 더욱 통용 되 는 폼 구성 요 소 를 구축 할 방법 이 있 습 니까?다음 편 에서 우 리 는 어떻게 포장 하 는 지 소개 할 것 이다.
이상 은 Flutter 가 로그 인 페이지 를 개발 하 는 상세 한 내용 입 니 다.Flutter 개발 로그 인 페이지 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Flutter】DateTime 전월의 일수를 취득한다달의 일수를 취득할 필요가 있어, 의외로 수요 있을까라고 생각했으므로 비망록 정도에 남겨 둡니다. DateTime 날짜에 0을 입력하면 전월 DateTime이 됩니다. 2021년 3월 0일 = 2021년 2월 28일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
