카테고리 없음

2024-11-28 TIL

daechaerohwachang 2024. 11. 28. 20:50

1. JSON

 

//직렬화 : 객체를 JSON형태의 문자열로 변환할때
//        객체 - Map - String
//        jsonEncode
//        객체에 toJson 메서드 구현
//        역직렬화 : JSON형탱의 문자열을 객체로 변환할때
//        String - Map - 객체로 바꿔준다
//        String - Map : jsonDecode 함수
//        Map - 객체 : 객체에 fromJson named 생성자를 구현해서 사용
import 'dart:convert';

//직렬화 : 객체를 JSON형태의 문자열로 변환할때
//        객체 - Map - String
//        jsonEncode
//        객체에 toJson 메서드 구현
//        역직렬화 : JSON형탱의 문자열을 객체로 변환할때
//        String - Map - 객체로 바꿔준다
//        String - Map : jsonDecode 함수
//        Map - 객체 : 객체에 fromJson named 생성자를 구현해서 사용

void main() {
 // Pet

 String easyJson = """
{
  "name": "야옹이",
  "age": 1,
  "isFemale" :true
  }""";

//1/ String - Map 형태로 바꾼다
Map<String, dynamic> easyMap = jsonDecode(easyJson);
//3. Map - class 객체로 바꾼다
Pet pet = Pet.fromJson(easyMap);
 print(pet.toJson());

//펫디테일
//컨텍트
String hardJason= """
{
"name": "야옹이",
"age":1,
"isFemale" : true,
"favorite_foods" : ["캣닢","연어","참치"],
"contact":{
"mobile": "010",
"email":null
}
}
""";
// 1. jsonString -Map 형태로 바꾼다
final hardMap = jsonDecode(hardJason);

// 3. class를 정의했으니 객체로 만든다.
PetDetail petDetail = PetDetail.fromJason(hardMap);
print(petDetail.toJason());
}

// 2. 객체로 바꾸기 위해서 class를 정의한다-가장안에 있는 Contact-연락처 먼저
class PetDetail{
 String name;
 int age;
 bool isFemale;
 List<String> favoriteFoods;
 Contact contact;

PetDetail({
  required this.name,
  required this.age,
  required this.isFemale,
  required this.favoriteFoods,
  required this.contact,
});

// fromJason 네임드 생성자
PetDetail.fromJason(Map<String,dynamic>map)
:this (
  name: map['name'],
  age: map['age'],
  isFemale: map ['isFemale'],
  favoriteFoods: List<String>.from(map['favorite_foods']),
  contact: Contact.fromJson(map['contact']),
 );

 //toJason 메서드
 Map<String,dynamic> toJason(){
  return {
    'name':name,
    'age': age,
    'isFemale': isFemale,
    'favorite_foods': favoriteFoods,
    'contact':contact.toJson(),

  };
 }
}


class Contact{
  String mobile;
  String? email;

  Contact({
    required this.mobile,
    required this.email,
  });

  // Contact. fromJson 네임드 생성자 만들기
 Contact.fromJson(Map<String, dynamic>map)
 :this(
    mobile: map['mobile'],
    email: map['email'],
  );

  // toJson 메서드 만들기
  Map<String, dynamic> toJson() {
    return {
      'mobile':mobile,
      'email':email,
    };
  }
}

// 2. class를 정의한다
// name,age, isMale
class Pet {
  String name;
  int age;
  bool isFemale;

  Pet({
    required this.name,
    required this.age,
    required this.isFemale,
  });

  //fromjson named생성자 만들기
  Pet.fromJson(Map<String,dynamic> map)
     : this(
      name: map['name'],
      age: map['age'],
      isFemale: map['isFemale'],
     );
  Map<String, dynamic> toJson(){
    return {
      'name': name,
      'age': age,
      'isFeMale': isFemale,
    };
  }
}


is this game? or test?

 

2.MVVM

 

void main() {
  runApp(ProviderScope(child: MyApp()));
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}
ProviderScope
 

이걸로 묶어주는 이유?

 

 

 

void getUser() async {
  UserRepository userRepository =UserRepository();
  User user = await userRepository.getUser();
  state = HomeState(user);
  }

}

사용자가 버튼을 클릭했을때 뷰모델에게 요청을 하면 뷰모델은 레포지토리에서 데이터를 가지고 와서 상태를 업데이트해줌

 

 

4책검색앱 만들기


import 'package:flutter/material.dart';

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(),
      ),
      body: Text('Homepage'),
    );
  }
}

여기서 Scaffold를 wrap with widget으로 하여 검색화면에서

 

return GestureDetector(
onTap: () {
        FocusScope.of(context).unfocus();

이거로 바꾸면 빈화면 클릭시 키보드 내려감

 

childAspectRatio: 3/4

각 아이템의 비율

crossAxisSpacing: 10)

간격 

 mainAxisSpacing: 10

세로 간격

 

return GestureDetector(
            onTap: () {
              showModalBottomSheet(context: context, builder:(context) {
                return Container(
                  width: double.infinity,
                  height: 300,
                  child: Text('data'),
                );
              },);
            },

이미지를 누르면 나오는 바텀시트