Flutter 이해하기

Flutter의 모든 위젯은 StatelessWidget 과 StatefultWidget으로 나눌 수 있다

StatelessWidget : 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯
StatefulWidget : 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯

🚩StatelessWidget (새로고침 없음)

• extends StatelessWidget : StatelessWidget의 기능을 물려받는다
• 생성자 : 클래스 이름과 동일한 함수
• build 함수 : 화면에 보여줄 자식 위젯을 반환
  DartPad로 연습하기

🚩StatefulWidget(새로고침 있음)

DartPad로 연습하기

👷‍♂️영역 배치 관련

💡Scaffold : 간편 배치

• Scaffold 위젯 UI의 뼈대를 잡아주는 역할을 하는 위젯
• 상단 appBar, 중앙 body, 하단bottomNavigetionBar, 우측하단 floatingActionButton

Scaffold(
	appBar: 다른 위젯, // 상단 바
	body: 다른 위젯, //화면 중앙에 가장 큰 면적
	bottomNavigationBar: 다른 위젯, //하단 바
	floatingActionButton: 다른 위젯, //우측 하단
),

💡Column : 세로 방향

세로 방향으로 여러 위젯을 나열할 때 사용

Column(
  children: [ // 자식 위젯들
    Text("위젯1"),
    Text("위젯2"),
  ],
),

💡Padding

전방위 모두 동일 적용

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

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위젯을 사용

Text(
  '텍스트 내용',
  style: TextStyle(
    fontSize: 35, // 폰트 크기
    fontWeight: FontWeight.bold, // 폰트 두께
    color: Colors.amber, // 폰트 색상
  ),
),

💡TextField : 텍스트 입력

TextField(
	obscureText: true,
	decoration: InputDeCoration(
    labelText:"비밀번호"
    ),
),

🕹️버튼 관련

💡ElevatedButton : 기본 버튼

// 위로 올라와 있는 듯한 버튼
ElevatedButton(
  onPressed: () {},// 클릭 이벤트 담당
  child: Text('Elevated Button'), // 버튼 속 위젯
),

💡TextButton : 텍스트 버튼

// 텍스트 버튼
TextButton(
  onPressed: () {},
  child: Text('Text Button'),
),

💡IconButton : 아이콘 버튼

// 아이콘 버튼
IconButton(
  onPressed: () {},
  icon: Icon(Icons.add),
),

📷이미지 관련

💡 Image

Image.network("URL")

Padding(
       padding: const EdgeInsets.all(32),
       child: Image.network("URL",
       width: 81,
),

🖱️Scroll 관련

💡SingleChildScrollView

범위 감싸기

  body: SingleChildScrollView(
   child: 다른 위젯,
  )