flutter - 커스텀 위젯 만들기
2024-11-20 14:24
3
0
0
0
본문
접기
[ ▼ 작성자 참고 Source ]
void main() {
runApp(const Suse_App());
}
class Suse_App extends StatelessWidget {
const Suse_App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomAppBar(),
body: SuseItem(),
)
);
}
}
//커스텁 위젯
class SuseItem extends StatelessWidget {
const SuseItem({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
child: Text('커스텀 위젯 입니다.'),
);
}
}
본문
앱의 내용이 커지면 여러개의 Container 가 중첩되면 원하는 Container를 찾기가 어렵습니다 이때 커스텀 위젯을 만들어서 Container 를 모듈화로 분리하여 소스코드의 내용을 축약할 수 있습니다
위젯 함수 작성법
class [함수명]extends StatelessWidget {
const [함수명]({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
child: [출력할 위젯]('커스텀 위젯 입니다.'),
);
}
}
1. 함수명은 영문 대문자로 시작해야 됩니다
2. return 오른쪽에 출력할 위젯명 을 입력합니다
3. 함수 사용은 함수명을 입력하면 바로 사용가능합니다
class Suse_App extends StatelessWidget {
const Suse_App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomAppBar(),
body: [사용할 위젯명],
)
);
}
}
원하는 위치에 작성한 위젯 함수명을 원하는 위치 입력하시면 됩니다.
0
0
로그인 후 추천 또는 비추천하실 수 있습니다.
댓글목록0