본문 바로가기

PROGRAMING/FLUTTER

Flutter TextField 입력 고고!! StatelessWidget하고 StatefulWidget 차이!!

Flutter   TextField 입력 고고!! StatelessWidget하고  StatefulWidget 차이!!

StatelessWidget

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  String _data='';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text입력에제',
        home: new Scaffold(
            appBar: new AppBar(
              title: new Text("My Input Text"),
            ),
            body: new Container(
              child: new Center(
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new TextField(
                      decoration: new InputDecoration(
                        hintText: "여기에 입력",
                      ),
                      onSubmitted: (String str) {
                        _data = str;
                      },
                    ),
                    new Text(_data),
                  ],
                ),
              ),
            )));
  }
}

TextField에 글자를 입력하고 서브밋 버튼을 누르면 멤버변수 _data에 값을 할당
이렇게 해도 Text에는 글자가 나타나지 않음

글자를 입력해도 밑에 Text에 표시가 되지 않음
StatefulWidget 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text입력에제',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  String _data='';
  @override
  Widget build(BuildContext context) {
    return  new Scaffold(
          appBar: new AppBar(
            title: new Text("My Input Text"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "여기에 입력",
                    ),
                    onSubmitted: (String str) {
                      setState(() {
                        _data = str;
                      });
                    },
                  ),
                  new Text(_data),
                ],
              ),
            ),
          )
    );
  }
}

 

코드가 좀 수정되었지만 
TextField에 글자를 입력하고 서브밋 버튼을 누르면 멤버변수 _data에 값을 할당

이렇게 해도 Text에는 글자가 나타남

이 테스트를 하면서 보았던 오류
처음에 멤버변수 String _data; 를 초기화를 하지 않으면 아래와 같은 오류가 난다.

그래서 String _data=''; 를 해주었는데 null에 대해서는 dart 문법좀 공부해야겠다.