본문 바로가기
백엔드개발자/FLUTTER, DART

[Flutter] TextEditingController, 사용자 입력한 값, 자식위젯에서 부모위젯 상태변경

by 보혀니 2023. 1. 24.

 

 

 

 

자식에서 부모위젯 상태변경하는 방법 프로세스

1. 부모위젯 함수를 작성.

2. 그 함수를 자식에게 전달.

3. 자식은 함수를 받아서 사용.

 

addOne() {
  setState(() {
    total++;
  });
}

부분 보면 됨

 

 

사용자 입력값 담는거 방법 2가지

1. TextEditingController 사용하삼

2. 직관적으로 보려면 onChange 써서 text(사용자가 입력한 값) 담으삼

var inputData1 = TextEditingController();



child: TextField(
  // 입력한 데이터가 inputData1에 저장된다.
  // controller: inputData1
  onChanged: (text) {
    inputData2 = text;
    print(inputData2);
  },
)),

부분 보면 됨

 

 

전체 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var total = 3;

  addOne() {
    setState(() {
      total++;
    });
  }

  @override
  build(context) {
    return Scaffold(
      appBar: AppBar(title: Text(total.toString())),
      floatingActionButton: FloatingActionButton(onPressed: () {
        showDialog(
            context: context,
            builder: (context) {
              return DialogUI(addOne: addOne);
            });
      }),
    );
  }
}

class DialogUI extends StatelessWidget {
  DialogUI({Key? key, this.addOne}) : super(key: key);
  final addOne;
  var inputData1 = TextEditingController(); // 입력한 데이터
  var inputData2 = '';

  @override
  Widget build(BuildContext context) {
    return Dialog(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
            width: 250,

            child: TextField(
              // 입력한 데이터가 inputData1에 저장된다.
              // controller: inputData1
              onChanged: (text) {
                inputData2 = text;
                print(inputData2);
              },
            )),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextButton(
                onPressed: () {
                  addOne();
                },
                child: Text('등록')),
            TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('취소')),
          ],
        )
      ],
    ));
  }
}