💙Flutter 위젯

팝업창

• showDialog

showDialog를 이용해 AlertDialog를 실행시키고 content안에 내용을 넣을 수 있다.
AlertDialog

alertDialog

title : 제목 영역
content : 내용 영역
SingleChildScrollView, ListBody를 이용하면 스크롤 동작 가능
action 프로퍼티에는 버튼 적용
Navigator.of(context).pop() : 다이얼로그 닫기

class _MyHomePageState extends State<MyHomePage> {

void FlutterDialog() {
	showDialog(
       context: context,
       barrierDismissible: false, // 바깥 영역 터치시 닫을지 여부
       builder: (BuildContext context) {
          return AlertDialog(
             title: Text('팝업 메시지'),
             content: SingleChildScrollView(
             child: ListBody(
                children: <Widget>[
                    Text('Alert Dialog 테스트'),
                    Text('ok 버튼 클릭하세요'),
                ],
             ),
          ),
       actions: <Widget>[
           FlatButton(
               child: Text('ok'),
               onPressed: () {
                  Navigator.of(context).pop();
               },
           ),
           FlatButton(
               child: Text('cancel'),
               onPressed: () {
                   Navigator.of(context).pop();
               },
            ),
         ],
      );
    }
  );
}

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('Alert Dialog test'),
            onPressed: () => FlutterDialog(),
          )
        ],
      )
    );
  }
}

showDialog(
        context: context,
        builder: (context) => StatefulBuilder(builder: (context, setState) {
//Dialog안에 setState를 적용하려면 StateFulbuilder를 꼭 적용해야 한다.

              return AlertDialog(
                 shape: RoundedRectangleBorder(
                 //팝업창에 radius를 주기위한 옵션
                     borderRadius: BorderRadius.all(Radius.circular(32.0))),
                contentPadding: EdgeInsets.only(top: 0),
                //default 패딩값을 없앨 수 있다.
                content:Container()

TextFormField

https://blog.codefactory.ai/flutter/form/

PopupMenuButton

• 팝업 목록
  https://jinhan38.com/130

SQlite

• SQFlite는 SQlite를 플러터에서도 사용할 수 있도록 지원하는 플러그인
• 관계형 데이터베이스로 파일 기반으로 하며 서버가 아닌 로컬 기기에 저장된다

https://hanab.kr/%ed%94%8c%eb%9f%ac%ed%84%b0-flutter-sqlite-%ec%82%ac%ec%9a%a9%eb%b0%a9%eb%b2%95-%ec%98%88%ec%a0%9c/

위젯 정렬

• 행(Row)의 경우, 주축의 기준은 가로.
  

• 열(Column)의 경우, 주축의 기준은 세로.
  

Transformation 위젯

Transform.scale(
	scale:  4.2 ,    //원래 아이콘 사이즈의 4.2배로 키우기
    child: icon(icons.add),   //사이즈 변경할 위젯 생성
) //사이즈 조절(container보다 크게 설정해도 container의 크기는 변하지 않음)

Transform.translate(
	offset: Offset(dx,dy),   //x축,y축으로의 이동거리 설정
    child: Text('Hello'),    //offset만큼 이동시킬 위젯 생성 
)  //위치 조절

Transform.rotate(
	angle: pi/4 ,   //45deg
    child:      ,   //각도 바꿀 위젯 생성
)  //각도 조절

Container 위젯

clipBehavior: Clip.hardEdge //css의 overflow와 비슷한 속성

reusable 위젯 생성

1. 위젯 파일 생성
2. class 생성
3. 변경되는 요소들 변수로 선언해주기 (final 변수타입 변수명;)
4. constructor 생성자 만들기 (code action으로 자동 생성 가능)
   *code action 단축키: ctrl+.
5. 변경되는 요소들 변수명으로 바꿔주기
6. const 제거

함수 생성

• 리턴타입 함수명 (파라미터) { }

SingleChildScrollView 위젯

• 스크롤 가능하게 함
• 위젯이 화면보다 overflow되서 오류뜰 때 전체 body를 감싸면 화면 스크롤이 가능해지면서 오류가 사라짐

theme

theme: ThemeData(
	textTheme: const TextTheme(
    	titleLarge: TextStyle(
        	color: Colors.red,
        ),
    ),
),

Text('Hello, I am title',
	style: TextStyle(
    	color: Theme.of(context).textTheme.titleLarge!.color,  
    ),   //context는 이전에 있는 모든 상위 요소들에 대한 정보이다
),   //dart는 null safe언어이기에 titleLarge가 null이 아님을 알려줘야 한다.
     //?(물음표)를 사용해서 null이 아닌 경우에만 실행하라고 알려줘도 된다.

Widget Life Cycle

1. initState 위젯

• 상태를 초기화하기 위한 메소드
• 대부분의 상황에서 필요하지 않음 (변수 초기화로도 가능하기 때문)
• build 빌드 메소드보다 먼저 호출되어야 한다
• initState메서드는 단 한 번만 호출된다
• 반드시 super.initState()를 호출해야한다
  
  

2. didChangeDependencies()

• initState() 다음으로 호출되며, 이후에는 build()가 호출된다
• inheritedWidget이나 Provider를 사용하는 경우, InheritedWidget이나 Provider의 내용이 변경될 때마다 호출된다

2. dispose 위젯

• 위젯을 위젯트리에서 제거할 때 사용되는 메소드

async

• 작업이 오래걸리는 경우, 해당 작업이 끝날 때까지 기다리게 함.
  (API에 요청을 하고 바로 다음 코드 작업으로 넘어가는 것이 아니라, 서버가 응답할 때까지 프로그램을 기다리게 하는 경우)

• 리턴타입 함수명 () async {}

- await

• 작업이 완료될 때까지 기다려야하는 코드 앞쪽에 붙여준다.
• await은 asynchronous function(비동기 함수)내에서만 사용될 수 있다.
• Future 타입과 주로 사용됨

class ApiService {
	final String baseUrl="https://webtoon-crawler.nomadcoders.workers.dev";
	final String today="today";
    
void getTodaysToons() async {  //비동기함수 async
	final url=Uri.parse('$baseUrl/$today');
    final response=await http.get(url);  //get함수는 http패키지에 있는 함수이다.  
    //await을 통해 서버가 응답할 때까지 기다리고 응답하면 response라는 변수에다 데이터를 저장한다.
    if(response.statusCode==200){  //요청에 성공하면
    	print(response.body);  //서버가 보낸 데이터 출력하기
        return;
    }
    throw Error();
}

- jsonDecode

• JSON 코드로 바꿔주는 함수
• jsonDecond(String)
• 반환값 타입은 dynamic

final List<dynamic> webtoons=jsonDecode(response.body);

➡️api 불러오기

class ApiService {
	final String baseUrl="https://webtoon-crawler.nomadcoders.workers.dev";
	final String today="today";
    
    Future<List<WebtoonModel>> getTodaysToons() async {  
    	//Future은 당장 완료될 수 있는 작업이 아님을 뜻함
        //비동기함수 async (작업이 오래걸리는 경우, 해당 작업이 끝날 때까지 기다리게 함)
    	List<WebtoonModel> webtoonInstances=[];
        final url=Uri.parse('$baseUrl/$today');
        //형변환 메소드 parse, toString, toList
        final response=await http.get(url);  
        //url은 Uri타입이어야 한다
        //get함수는 http패키지에 있는 함수
        //Future타입을 반환하는 함수
        //await을 통해 서버가 응답할 때까지 기다리고 응답하면 response라는 변수에다 데이터를 저장한다.
        if(response.statusCode==200){  //http 응답은 상태코드로 표현됨
        //(200은 클라이언트의 요청을 정상적으로 수행했을 때의 상태 코드)
            final List<dynamic> webtoons=jsonDecode(response.body);
            for (var webtoon in webtoons){
                webtoonInstances.add(WebtoonModel.fromJson(webtoon));
            }
            return webtoonInstances;
        }
        throw Error();
    }
}


class WebtoonModel {
	final String title, thumb, id;
    
    WebtoonModel.fromJson(Map<String, dynamic> json)
    	//Map은 키(Key)와 값(Value)로 구성된 클래스
        : title=json['title'],
          thumb=json['thumb'],
          id=json['id'];
    //named Constructor
    //생성자 내부에서 클래스의 멤버 변수를 초기화하는 특별한 구문으로 생성자의 중괄호({}) 이후에 작성된다.
    //Dart에서는 json을 다루기 위해 Map<String, dynamic> 이라는 자료형을 사용한다. 
    //json 데이터는 키와 값으로 이루어져있고 키는 반드시 String이며 값은 자료형이 정해져있지 않다. 
    //때문에 Map<String, dynamic> 자료형으로 모든 json 데이터를 다룰 수 있다. (json 자료형)

상태코드

200 클라이언트의 요청을 정상적으로 수행함
201 클라이언트가 어떠한 리소스 생성을 요청, 해당 리소스가 성공적으로 생성됨을 의미
400 클라이언트의 요청이 부적절할때
401 클라이언트가 인증되지 않은 상태에서 리소스를 요청할때
403 유저인증상태와 관계없이 응답하고 싶지 않은 리소스를 요청할때
405 클라이언트가 사용불가능한 리소스를 요청할때(ex.계정, 인증관련)
301 클라이언트가 요청한 리소스에 대한 URI가 변경되었을때
500 서버에 문제가 있을경우

단축키

https://andaeng.tistory.com/46