라우터를 이용해 페이지를 설정한다
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/home",
routes: {
"/login" : (context) => LoginPage(),
"/home" : (context) => HomePage(),
},
);
}
}
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text("LoginPage")),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text("HomePage")),
);
}
}
hotreload는 materialApp에선 안되고 Scaffold에서만 됨
ElevatedButton
은 void function이기에 (){} 익명함수를 사용한다.
TextFormField에 힌트를 주고싶다면 decoration에서 InputDecoration으로 힌트를 줄 수 있다.
비밀번호의 경우 input값을 보여주면 안되기에 TextFormField에서 obscureText : true로 세팅할수있다.

변수값을 Tex


화면이동에는 크게 3가지 방법이 있다.
pushName은 새로운 창을 하나 더만드는 것이고,
pushReplaceName은 바꿔치기
pushNamedAndRemoveUntill 띄울꺼 빼곤 전부 제거,
redirect로 생각하면 쉽겠다.

홈바도 만들어보았다.. Navigator를 써서 뒤로가기 버튼을 구현해보았고, pop은 이전의 데이터를 가지고있는 A로 돌아가는 것이다.
또한 이렇게 버튼을 만들지 않아도 AppBar의 leading자리에 뒤로가기버튼이 있는데 이건 pop으로 이동하게 된다.
이 아랜 생각 나는대로 만들어 봤다.
1. 키보드 빠져나가기

TextFormField를 눌렀을때 키보드가 나오지만 키보드를 없앨수가 없다…
그래서 노란 컨테이너를 누르면 돌아가게 구현해보았다.

Container를 InkWell로 감싸 java의 ActionListener처럼 onTap이라는걸 사용할수 있게 했다.

onTap은 void Function이 들어가야하기에 람다 표현식으로 정리했고, 스택 오버플로우에 찾아보니
FocusScope.of(context).unfocus()
를 이용해 포커스를 해제할수 있다 했다.
그래서 위와 같이 코드를 적게 되면 노란 컨테이너를 눌렀을때 포커스가 해제 된다.
2. 키보드 나올때 화면 잘린거 수정하기

가볍게 생각해 TextFormField의 onTap으로 스크롤바를 제일 아래로 조정하면 되는줄 알았다…하지만 여전히 짤려나갔다..
예전 채팅방에서도 비슷한게 있었는데 아마 화면(키보드)이 다 생성이 되고 스크롤을 건드려야 하지 않을까 싶었다.

scroll을 불러와서 ListView의 컨트롤러에 붙혀줬다.


TextFormField의 onTap에 딜레이를 걸어 스크롤을 움직이게 해줬다.
선생님의 방법은 이렇다…
전체를 SafeArea로 감싸고 Column으로 나눈다. 그리고 위의 그림만 Expanded로 감싼 ListView를 써서 움직일수 있게 해준다. 그러면 키보드가 올라왔을때 위의 그림만 쪼그라질수 있다.
Share article