Flutter - 커스텀 위젯

코드가 길어지고 반복되는 코드는 커스텀 위젯을 만들어 따로 관리하는게 편하다

 

stless 치면 자동완성이 된다.

 

class 작명하셈 extends StatelessWidget {
  const 작명하셈({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return 짧은단어로축약할위젯()

  }
}

커스텀 위젯의 간단한 문법설명

 

flutter의 모든 위젯은 class임

 

class 안에는 많은 변수, 함수가 있어 직접 적는건 번거로워서 class를 복사해서 사용함

 

이때 extends 키워드를 사용함 복사하기 좋은 위젯 class 가 StatelessWidget 이고 이걸 복사해서 커스텀 위젯을 만듬

 

@override

class 내부에 build(){}라는 함수가 선언 되어 그 안에 위젯이 있어야 하는데 

class는 복사해서 만들기 때문에 build(){}가 중복 될 수 있다. 

그래서 적용을 더 우선시 할때 @override를 사용하면 된다.

 

 

ListView

 

 

ListView(
  children: [
    Text('안녕'),
    Text('안녕'),
    Text('안녕'),
  ],
)

 

 

Column()과 유사하게 안에 위젯들이 열방향으로 나열되지만, 

Column은 내용이 화면을 넘어가면 스크롤이 생기지 않는다

 

ListView는 내용이 화면을 넘어가면 자동으로 스크롤이 생긴다.

또한 화면에 비춰지지 않는 부분은 메모리가 할당 되지 않기때문에 

기능개선에 도움을 준다. 

 

 

class star extends StatelessWidget {
  const star({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(child: Row(children: [
      Icon(Icons.star),Icon(Icons.star),Icon(Icons.star)
    ],));
  }
}

 

 

하단바 부분을 따로 위젯으로 뺐다.

bottonNavigationBar : star() 하면 커스텀 위젯이 적용 된다.