⭐️ 개발/플러터

[패캠] - 데이터 저장소, DataBase 이해하기

짱구러버 2022. 11. 18. 14:23
728x90

들어가기 앞서...

데이터 베이스 이해하기 

 

1. 주의 깊게 봐야하는 점...

 

2. 간단한 설명으로는...

 


본문으로...

1.  InputForm 클래스를 만들어서 매개변수를 정해주자!

class InputForm {
  InputForm({
    required this.name,
    required this.age,
  });

  String name;
  int age;
}

2. StatefulWidget과 Textfile 를 사용해서 이름과 나이를 입력할 폼을 만들어주자!

body: Column(
        children: [
          Column(
            children: [
              TextField(
                controller: nameController,
                decoration: const InputDecoration(label: Text('name')),
              ),
              TextField(
                controller: ageController,
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(label: Text('age')),
              ),
              ElevatedButton(
                  onPressed: () {
                    setState(() {
                      users.add(InputForm(
                          name: nameController.text,
                          age: int.parse(ageController.text)));
                    });
                  },
                  child: const Text('add'))
            ],
          ),
          const Divider(),
          Expanded(
              child: users.isEmpty
                  ? const Text('empty')
                  : ListView(
                      children: [
                        ListTile(
                          title: Text(users[0].name),
                          subtitle: Text(users[0].age.toString()),
                        )
                      ],
                    )),
        ],
      ),

3. 매개변수와 dispose 함수를 만들어주자!

  TextEditingController nameController = TextEditingController();
  TextEditingController ageController = TextEditingController();

  final users = <InputForm>[];

  @override
  void dispose() {
    nameController.dispose();
    ageController.dispose();
    super.dispose();
  }

4. 인덱스의 크기만큼 입력하면 늘어나게 코드를 추가해주자!!

 Expanded(
  child: users.isEmpty
      ? const Text('empty')
      : ListView.builder(
          itemCount: users.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(users[index].name),
              subtitle: Text(users[index].age.toString()),
            );
  }))

끝으로...

  1. 클래스를 만들어서 매개변수의 타입을 지정이 가능하다.
  2. textFiled 를 만들어서 입력해서 출력할 수있다.
  3. 리스트의 크기만큼 반복해서 나오게 하는 ListView() 을 알았다!

 

 

 

 

 

728x90