[Flutter] 플러터 기초 (4) - Hello World, FloatingActionButton 등 기본 예제.

 

 

[Flutter] 플러터 기초 (4) - Hello World, FloatingActionButton 등 기본 예제.

 

 

 

Flutter 플러터 기초 (4) - Hello World, FloatingActionButton 등 기본 예제.

 

 

 

이모티콘・01・고양이 마멋 친구들 - Google Play 앱

 

 

안녕하세요 정보처리마법사 입니다.

 

이번 포스팅의 주제는 플러터 기초에 관한 내용입니다.

 

특별히 짜여진 커리큘럼은 없으면 그냥 되는대로 프레임워크랑 언어를 익히는 중입니다.

 

 

새 플러터 프로젝트를 생성합니다.

 

 

자동으로 생성되는 기본 예제를 에뮬로 실행했습니다.

 

 

아래쪽은 모두 삭제하고,

 

 

Scaffold 를 하나 만들었습니다.

 

 

기본 MyApp은 StatelessWidget을 상속받아 만들어졌는데 실시간으로 변화를 반영하는 StatefulWidget을 상속받은 위젯을 하나 만들겠습니다. st까지만 타이핑해도 저렇게 친절하게 어떤걸 만들지 보여줍니다. New Stateful widget을 하나 만들어줍니다.

 

 

 

 

 

 

 

위젯명만 넣어주면 되게 자동생성이 똭

 

 

HelloState 로 이름을 정해주니 아래쪽도 자동반영이 똭

 

문자열 변수를 하나 만들어줍니다.

 

 

생성자가 없다네요.

 

 

Alt + Insert를 눌러줍니다.

 

 

선택해서 OK

 

 

자동으로 생성자가 똭

 

 

Text를 위젯으로 감싸줍니다.

 

Scaffold로 감싸줍니다.

 

 

floatingActionButton 을 만들어서 테스트 출력을 해봅니다.

 

 

콘솔에 test 가 잘 나오네요.

 

 

onPressed에 만들 메소드명을 먼저 적어주고 Alt + Enter 해서 Create method '_changeMsg' 를 합니다.

 

 

자동생성이 똭

 

 

setState 를 이용해서 실시간 반영되게 합니다. UI Refresh 같은 기능?

 

 

body 의 텍스트를 Alt+Enter로  Center widget으로 감싸면 인자에 따라 조금 다르지만 어쨋든 화면중앙으로 오게 됩니다.

 

 

화면에 이렇게 보이는군요.

 

 

버튼을 클릭하면 호출되는 _changeMsg 메소드안에  클릭할 때마다 카운트가 증가하게 만들었습니다.

 

 

잘 되는 군요.

 

 

이상으로 포스팅을 마칩니다. 감사합니다.

 

 

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HelloState('Hello World!!'));
  }
}
 
class HelloState extends StatefulWidget {
  final String title;
 
  HelloState(this.title);
 
  @override
  _HelloStateState createState() => _HelloStateState();
}
 
class _HelloStateState extends State<HelloState> {
  String _msg = 'Hello World!!!';
  int _cnt = 0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.ac_unit), onPressed: _changeMsg),
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _msg,
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_cnt',
              style: TextStyle(fontSize: 20),
            )
          ],
        )));
  }
 
  void _changeMsg() {
    setState(() {
      _msg = 'Hello World~!\r\nNice to meet you~!';
      _cnt++;
    });
  }
}
 

Ctrl + C ,   Ctrl + V 

 

 

 

 

이상으로 포스팅을 마칩니다. 감사합니다.

 

 

 

 

잘 못 된 정보가 있으면 말씀해주세요.

공감버튼 클릭은 작성자에게 큰 힘이 됩니다.  행복한 하루 되세요.

 

“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"