Flutter 공부 기록 12

저번에는 웹뷰를 사용해 보았는데, 거기에 AppBar도 추가해보겠습니다.

 

배경색과 제목을 설정 했습니다.

제목이 좌측에 있는 것도 나쁘진 않지만, 중앙에도 놓아보고 싶죠?

centerTitle의 속성을 true로 주시면 됩니다.

추가로 높이도 바꿀 수 있나 궁금해서 알아보니

AppBar 위젯 내부에서는 안되는 것 같고,  PreferredSize를 사용하여 설정했습니다.

preferredSize: const Size.fromHeight() 를 사용하시면 됩니다.

그런데, 높이가 증가하니 제목이 위쪽에 쏠린 느낌이 들죠?

toolbarHeight를 사용하면 높이를 직접 설정할 수 있습니다.

 

이제 appBar에 제 기본 페이지인 https://riddleuscode.tistory.com/로 갈 수 있는 홈 버튼을 만들어보겠습니다.

먼저 홈버튼을 눌렀을 때 동작하도록 미리 준비작업을 해두겠습니다.

build 메소드 위에

WebViewController? webViewController;

를 선언해주세요. 값을 바로 주지 않을 것이니, null을 허용할 수 있도록 ?를 붙여줍니다.

이어서 생성자를 만들어 주겠습니다.

RiddleApp({Key? key}): super(key:key);

 

WebView 위젯으로 와서 onWebViewCreated 속성을 추가해주면,

위 생성자는 웹뷰가 생성될때 웹뷰 컨트롤러를 주입받습니다. 

child: WebView(
  onWebViewCreated: (WebViewController webViewController){
    this.webViewController= webViewController;
  },
    initialUrl: 'https://riddleuscode.tistory.com/2',
    javascriptMode: JavascriptMode.unrestricted,
  ),

 

 

이제 아래처럼 action을 작성해주세요.

AppBar에 IconButton 추가하고, 

눌렀을때 작동할 이벤트를 onPressed에 작성해주시고,

icon을 설정해주시면 됩니다.

 

webViewController의 loadURL은 webViewController가 null이 아닐 경우만 작동합니다.

따라서 null이 아님을 보증해줘야하는데, !를 붙여서 해결할 수 있습니다. (빼면 빨간줄이 뜹니다.)

loadURL에는 이동할 주소를 적어주시면 됩니다.

다 만들고 홈 버튼을 누르면..

이동이 잘 됩니다!

이번에는 구글 검색창으로 이동시키는 버튼을 추가해볼까요? 아이콘도 검색 아이콘이면 되겠죠?

 

단순히 복붙해서 값만 수정하면 될 정도로 간단합니다.

 

이번글은 여기까지 작성하도록 하겠습니다.

감사합니다~