2. AWS Amplify 모듈 1 시작하기 (flutter 버전 3)

https://aws.amazon.com/ko/getting-started/hands-on/build-flutter-app-amplify/?nc1=h_ls 

AWS에서 Flutter 애플리케이션 구축

1. Flutter 앱 만들기(30분): 모든 UI 구성요소가 구현된 Flutter 애플리케이션을 만듭니다.

 

30분? 일단 30분은 더 걸리는거 같다. 

복붙하면 되긴하지만 예제는 버전2로 만들어졌고 null safety가 적용되기 전 코드이기 때문에
버전 2를 쓰더라도 오류가 발생한다.

 

오류패턴은 모두 같지만 처리 해보지 않았다면 어려운 패턴이라고 생각된다.

 

수정 패턴 1

FlatButton오류

 

FlatButton, RaisedButton 등 이런저런 버튼 종류가 많은데 3에선 사용이 막혔다.
그래서 이 버튼이 아닌 다른 버튼으로 종류를 변경해 주어야 한다.

 

요즘은 ElevatedButton으로 개발 하는거 같다. 

IconButton 같은것도 ElevatedButton.icon(~) 이런식으로 대체해서 사용할 수도 있고 말이다.

 

수정 전

FlatButton(
  	onPressed: () {},
  	child: Text('Don\'t have an account? Sign up.')),
)

/*컬러가 있을때*/
FlatButton(
    onPressed: _login,
    child: Text('Login'),
    color: Theme.of(context).accentColor)

수정 후

ElevatedButton(
      onPressed: widget.shouldShowSignUp,
      child: Text('Don\'t have an account? Sign up.')),
)

/*컬러가 있을때*/
ElevatedButton(
    onPressed: _login,
    child: Text('Login'),
    style: ElevatedButton.styleFrom(
        backgroundColor : Theme.of(context).accentColor
    ),
)

 

Flutter가 버전이 높아지면 높아질수록 코드관리가 좀 더 좋아지는거 같다.

여기도 styleForm에서 모든 파라미터를 관리할 수 있다.

원래 배경색을 primary라는 파라미터로 썼는데 최근에 알기쉽게 backgroundColor로 변경되었다.

하지만 backgroundColor로 오류가 난다면 primary로 변경해서 배경색을 설정해주면 된다.

 

수정 패턴 2

this.~~  생성자 오류

class AuthState {
  final AuthFlowStatus authFlowStatus;

  AuthState({this.authFlowStatus});
}

모든 변수에는 required가 무조건 붙어야한다.

class AuthState {
  final AuthFlowStatus authFlowStatus;

  AuthState({required this.authFlowStatus});
}

 

수정 패턴 3

But Null이 가능하도록 설정된 변수는 required가 필요없다.

 

LoginPage({Key key, this.shouldShowSignUp}) : super(key: key);

이대로 모두 필수가 된다면 key값도 생성자로 보내야하는데
필요하지 않는 이상 key은 거의 보내지 않으며

flutter가 추천해주는 수정방법으로  required 붙인다면 무조건 다른곳에서 오류가 나게 되어있다.

 

이 코드는 null safety가 적용 되기 전이기 때문에 null을 언제 어디서든 써도 되기때문에 
key값을 안보내도 오류가 없었지만 

높은 버전에서는 어떤 변수가 null로 들어올 가능성이 있는지를 알려줘야한다.

 

LoginPage({Key? key,required this.didProvideCredentials}) : super(key: key);

Key 뒤에 물음표 적어주면 끝!

 

수정 패턴 4

pubspec.yaml 오류

 

camera:
path_provider:
path:

이걸 추가하라고 하는데 

camera 이 앞에 tap 정도의 공간이 필수적이다.

cupertino_icons: ^1.0.2

를 보면 tap이 되어 있는것을 볼수있다.

이 tap이 없으면 오류가 날 가능성도 있으니 꼭꼭 신경써서 넣자

 

 

이 이후에는 큰 오류는 없었고 순서대로 무조건 빠짐없이 넣으시면 어플은 어떻게 설정 됩니다.