Flutter의 모든 위젯은 StatelessWidget 과 StatefultWidget으로 나눌 수 있다
StatelessWidget : 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯
StatefulWidget : 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯
extends StatelessWidget
: StatelessWidget의 기능을 물려받는다생성자
: 클래스 이름과 동일한 함수 build 함수
: 화면에 보여줄 자식 위젯을 반환
- Scaffold 위젯 UI의 뼈대를 잡아주는 역할을 하는 위젯
- 상단 appBar, 중앙 body, 하단bottomNavigetionBar, 우측하단 floatingActionButton
Scaffold(
appBar: 다른 위젯, // 상단 바
body: 다른 위젯, //화면 중앙에 가장 큰 면적
bottomNavigationBar: 다른 위젯, //하단 바
floatingActionButton: 다른 위젯, //우측 하단
),
세로 방향으로 여러 위젯을 나열할 때 사용
Column( children: [ // 자식 위젯들 Text("위젯1"), Text("위젯2"), ], ),
Paddion(
padding: const EdgeInsets.all(8),
),
Paddion(
padding: const EdgeInsets.only(
left: 8,
right: 8,
),
),
Paddion(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 8,
),
)
Container(
width: double.infinity, // 폭
margin: EdgeInsets.only(top: 24),
height: 200, // 높이
color: Colors.amber, // 박스 색상
alignment: Alignment.center, //chlid 정렬
child: Text("I Love Flutter!"), // 자식 위젯
style: TextStyle(
color: Colors.white,
fontSize: 18
)
),
텍스트를 보여줄 때 Text위젯을 사용
Text(
'텍스트 내용',
style: TextStyle(
fontSize: 35, // 폰트 크기
fontWeight: FontWeight.bold, // 폰트 두께
color: Colors.amber, // 폰트 색상
),
),
TextField(
obscureText: true,
decoration: InputDeCoration(
labelText:"비밀번호"
),
),
// 위로 올라와 있는 듯한 버튼
ElevatedButton(
onPressed: () {},// 클릭 이벤트 담당
child: Text('Elevated Button'), // 버튼 속 위젯
),
// 텍스트 버튼
TextButton(
onPressed: () {},
child: Text('Text Button'),
),
// 아이콘 버튼
IconButton(
onPressed: () {},
icon: Icon(Icons.add),
),
Image.network("URL")
Padding(
padding: const EdgeInsets.all(32),
child: Image.network("URL",
width: 81,
),
범위 감싸기
body: SingleChildScrollView(
child: 다른 위젯,
)