[플러터] 공부 노트

serotonins·2023년 3월 10일
0

Develop

목록 보기
10/17

👀 필요한 정보

용어
세션웹 통신 중 유지하려는 정보 저장을 서버에
쿠키웹 통신 중 유지하려는 정보 저장을 개인 PC에
세션 상태클라이언트와 서버 간 통신(데이터 송수신) 인증(가능)된 상태.
서버는 [세션 유지 시간/클라이언트가 전송하려했던 데이터를 모두 수신할 때]까지 세션 상태 유지
세션 정보클라이언트가 서버에 전송할 데이터 정보.
stateful서버가 세션이 종료될 때까지 클라이언트의 세션 정보를 저장하는 네트워크 프로토콜
stateless서버가 클라이언트의 세션 상태 및 세션 정보를 저장하지 않는 네트워크 프로토콜=요청에 대한 응답만 처리
super상속받았을 때 부모 것을 지칭
+) 굳이 지정하지 않아도 자식이 재정의하지 않은 채 사용하면 부모 것 사용
this자신(자식 클래스) 것을 지칭
+) 재정의하고 지정 안하고 쓰면 자식 것 사용
?물음표가 붙어있으면 그거일 수도 있고 null일 수도 있고
!이 변수는 절대 null이 아님을 알려주는 기호

👀 기본 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // MyApp()은 기본적으로 소환할 생성자의 이름, 바꿔도 됨.
}

main.dart에 기본적으로 위 코드는 있고 시작해야 한다.

class MyApp extends StatelessWidget {
// ↑ MyApp이라는 class는 StatelessWidget을 연장=상속한다
// ↑ StatelessWidget = 이 위젯의 모든 것이 변경 불가(final로 변경 불가)
  const MyApp({super.key});
  // ↑ const MyApp({key? key}) : super(key: key); 로도 쓰는 것 같음. 
  // ↑↑ 요렇게 쓰면 {MyApp(= 생성자)의 인자인 key(?) 타입일 수도 있고
  // ↑↑ null일 수도 있는 매개변수 key가} : 부모가 준 key를 value로 가진다.
  // ↑ 매개변수 받는 거랑 비슷한 개념으로 보면 됨

   // 덮어 쓰기 = 상속 받은 메소드 재정의(여기서만 ~라고 설정하기)
  Widget build(BuildContext context) {// 상속받은 Stateless"Widget"의 build()를
    return MaterialApp( 
      title: 'Flutter Demo', // 창 제목
      theme: ThemeData(
        // 이런 테마 등의 생성자도 dart 파일 만들어서 따로 관리, 적용 가능

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'), // 앱 화면 맨 위 제목
    );
  }
}

아까 호출한 MyApp class

class MyHomePage extends StatefulWidget {
// ↑ StatefulWidget = 변경 가능한 상태의 위젯, 생명주기동안 변경되는 정보를 사용할 때 사용
// ↑↑ State에 선언해야 변경 가능, 나머지 서브클래스에는 변경 불가한 상수 선언
  const MyHomePage({super.key, required this.title});
  // ↑ MyHomePage 생성자는 부모의 key를 쓰고, title은 재정의(this)한 필수적(required) 인자

  final String title; // final은 한 번 정해지면 변경 불가

  
  State<MyHomePage> createState() => _MyHomePageState();
  // ↑ StatefulWidget은 createState(메소드)에서 생성한 객체를 반환
  // ↑ _MyHomePageState()에서 build한 객체를 반환 
}

홈페이지 생성

class _MyHomePageState extends State<MyHomePage> { 
// _어쩌구는 이 dart 파일에서만 쓰는
  int _counter = 0;

  void _incrementCounter() {
    setState(() { // setState()는 State 객체의 상태 변경을 전달
      _counter++;
    });
  }

  
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar( // appbar에 배경이랑 제목 설정
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      
      body: Center( // body(본 화면)에 중앙 정렬(center) 위젯
        child: Column( // 지식(child)으로 세로로 여러개의 요소를 가지는 위젯(column)
          mainAxisAlignment: MainAxisAlignment.center, // 가운데 정렬
          children: <Widget>[ // 자식으로 텍스트 두개
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      
      floatingActionButton: FloatingActionButton( // 플로팅 버튼
        onPressed: _incrementCounter, // 누르면 _incrementCounter 함수 실행
        tooltip: 'Increment', // 커서 갖다 대면 나오는 설명창
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

화면 디자인

0개의 댓글