IconButton 위치(정렬??) 질문

[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

JavascriptMode 변경하기

작성

463

안녕하세요. 질문이 있어서 글올립니다.

8강 web_view까지 봤는데요, appBar에서 actions하위 IconButton home icon위치를 우측에서 좌측으로 변경하고 싶습니다. 방법이 있을까요???

IconButton에 alignment속성이 있어서 추가해줘봤는데 어떤 값을 지정해도 우측에만 나오더라구요 ㅠㅠ

return Scaffold(
appBar: AppBar(
title: Text('Wonsun'),
backgroundColor: Colors.orange,
centerTitle: true,
actions: [
IconButton(
alignment: Alignment.topLeft,
onPressed: () {
controller.loadRequest(homeUrl);
},
icon: const Icon(
Icons.home,
color: Colors.white,
))
],
),
body: WebViewWidget(
controller: controller,
),
);

flutter 클론코딩

답변 2

코드팩토리

지식공유자

안녕하세요!

AppBar의 leading 파라미터에 위젯을 입력 해주면 왼쪽 끝에 위젯을 위치 할 수 있습니다.

그리고 지금은 아직 어렵겠지만 추후 강의를 마치고 나면 AppBar 정의 내부를 확인하면서 직접 AppBar를 만드는것도 가능 해질것입니다. AppBar 또한 단순히 하나의 위젯일 뿐이라는걸 기억하세요!

감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

Flutter에서 IconButton의 위치를 변경하고 싶으시다면 actions 속성을 사용하기보다는 이를 직접 AppBar의 leading 속성에 배치하여 해결하실 수 있습니다. actions는 기본적으로 오른쪽 정렬되어 있으며 leading 속성은 AppBar의 왼쪽에 아이템을 배치할 때 사용됩니다. IconButton을 actions에서 빼내어 아래와 같이 leading으로 옮겨주세요.

return Scaffold(
  appBar: AppBar(
    title: Text('Wonsun'),
    backgroundColor: Colors.orange,
    centerTitle: true,
    leading: IconButton(
      onPressed: () {
        controller.loadRequest(homeUrl);
      },
      icon: const Icon(
        Icons.home,
        color: Colors.white,
      ),
    ),
  ),
  body: WebViewWidget(
    controller: controller,
  ),
);

이렇게 수정하시면 home 아이콘이 AppBar의 좌측에 위치하게 됩니다.

인프런 커뮤니티 질문&답변

IconButton 위치(정렬??) 질문