[Flutter] 플러터 기초 stateless / stateful /restart /reload/Material / Cupertino

 

widget (stateless / stateful)

- stateless widget : 화면을 갱신할 필요 없이 정적인 화면을 구성할때 사용 

//stless
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

위젯 분리 

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: TestWidget(),
    ),
  ));
}

class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const SafeArea(
      child: Text(
        'hi',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
    );
  }
}

 

 

- stateful widget : 상황에따라 화면을 갱신할때 사용 

//stful
class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

---

Hot restart , Hot reload 

- 오래걸리는 컴파일 과정을 거치지 않고 코드의 변경사항을 즉시 반영 

주의사항 

- 재컴파일 후 빌드 하지 않기때문에 네이티브 코드수정, 라이브러이, 에셋등 변경시 정상동작 되지 않을 수 있음 

- 지나치게 많은 코드 변경시 도 정상동작 되지 않을 수 있음 (reload ->restart 순으로 상위 재시동 요청가능 , 주의 필요 )

 

---

- Hot restart  : 앱을 재시작 하는 형태 , 앱의 모든상태가 초기화 

- Hot reload : 앱을 재실행하지 않고 , 코드의 변경사항을 반영 

 

---

디자인 가이드  (Material / Cupertino)

- 디자인가이드는 디바이스에 따라 분리하여 구현이 가능하다. 

- google : material  , 비교적 cupertino 보다 material widget 이 더 많음 

Material Design

 

- apple : cupertino 

Cupertino (iOS-style) widgets

 

---

Container 

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return Column(
      //Flexible : 기본 Column 전체값에서 1:1 비율로 적용 , Flexible 단독사용시 1:1
      children: [
        // flex: 1:n 의 비율 적용시 사용
        Flexible(flex: 1, child: Container(color: Colors.red)),
        Flexible(flex: 2, child: Container(color: Colors.blue)),
        const SizedBox(
          width: double.infinity, //좌우를 꽉채움
          height: 100, //기본 사이즈
          child: Text('container box'),
        ),
        //Expanded : Flexible 단독사용과 동일 
        //Flexible은 내부객체의 높이에따라서 변경이되며 Expanded는 내부 객체 크기와 상관없이 전체를 차지한다. 
        Expanded(child: Container(color: Colors.blue, height: 100)),
        Flexible(child: Container(color: Colors.red, height: 200)),
        Flexible(child: Container(color: Colors.green, height: 100)),
      ],
    );
  }
}