[Flutter] 기본 개념 + 예제 코드 작성

1. Flutter ?

- 구글에서 만든 프레임워크. 크로스 플랫폼 개발 용이함.

- IOS의 스토리보드나 Android의 xml : 다른 데서 UI 만들고, 앱 상에서 UI를 불러오는 방식으로 코딩 했었는데 Flutter는 다름!

 

(EX 01)

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());    // 앱 실행

class MyApp extends StatelessWidget{  // 상태 변경 없는 위젯. 한번 UI가 그려지면 그대로 있음.
  @override
  Widget build(BuildContext context){   // UI 만드는 부분
    return new MaterialApp(             // MaterialApp Design(구글 기본 디자인) 사용해서 앱 만듦
      title: 'Flutter App',
      debugShowCheckedModeBanner: false, // 화면에 debug 표시 안보이게 함
      home: Scaffold(
        appBar : AppBar(title: Text("Title")),  //앱의 상단 타이틀
        body : Text("My Flutter App") // 앱화면에 표시되는 text
      ),
    );
  }
}

2. Widget

- Flutter앱에 있는 모든 것들을 위젯이라 봐도 무방함. text, button, layout, MaterialApp, Scaffold,,,, 모두~!

- 가장 바깥의 위젯-> 안쪽으로 위젯 넣는 방식으로 앱 만든다.

- MaterialApp -> Home-> Scaffold -> AppBar / Body -> text ... 순서로 

 

따라서, 위젯은 UI를 만드는 기본 단위이고, 안에서 밖으로 하나씩 더해주는 형태이다~!

* MaterialApp: Google의 material design 사용. 전체 앱의 테마, 색 등을 정할 수 있음. 

* Scaffold : 기본적인 Material design 구조 잡아줌. 뼈대!

* Icon : 원하는 icon과 색 지정 가능.

 body : Icon(Icons.send, color : Colors.blueAccent) 

* Image

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());    // 앱 실행

class MyApp extends StatelessWidget{  // 상태 변경 없는 위젯. 한번 UI가 그려지면 그대로 있음.
  @override
  Widget build(BuildContext context){   // UI 만드는 부분
    var imageURL = "https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
    
    return new MaterialApp(             // MaterialApp Design(구글 기본 디자인) 사용해서 앱 만듦
      title: 'Flutter App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar : AppBar(title: Text("Title")),  //앱의 상단 타이틀
        body : Image.network(imageURL)
      ),
    );
  }
}

* 여러 위젯 같이 써보기

- Column : 세로로 위젯 추가

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());    // 앱 실행

class MyApp extends StatelessWidget{  // 상태 변경 없는 위젯. 한번 UI가 그려지면 그대로 있음.
  @override
  Widget build(BuildContext context){   // UI 만드는 부분
    return new MaterialApp(             // MaterialApp Design(구글 기본 디자인) 사용해서 앱 만듦
      title: 'Flutter App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar : AppBar(title: Text("Title")),  //앱의 상단 타이틀
        body : Column(
          children: <Widget>[
            Text("My First Flutter App"),
            Text("Lets make our own app~!"),
            Icon(Icons.android, color: Colors.amber)
          ],

        )
      ),
    );
  }
}

- Row : 가로로 위젯 추가

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());    // 앱 실행

class MyApp extends StatelessWidget{  // 상태 변경 없는 위젯. 한번 UI가 그려지면 그대로 있음.
  @override
  Widget build(BuildContext context){   // UI 만드는 부분
    return new MaterialApp(             // MaterialApp Design(구글 기본 디자인) 사용해서 앱 만듦
      title: 'Flutter App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar : AppBar(title: Text("Title")),  //앱의 상단 타이틀
        body : Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround, //위젯 간격 일정하게~!
          children: <Widget>[
            Text("My First Flutter App"),
            Text("Lets make our own app~!"),
            Icon(Icons.android, color: Colors.amber)
          ],

        )
      ),
    );
  }
}

3. StatelessWidget VS StatefulWidget

(1) stateless 위젯에 버튼 넣기

 

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());    // 앱 실행

class MyApp extends StatelessWidget{  // 상태 변경 없는 위젯. 한번 UI가 그려지면 그대로 있음.
  int counter = 0;

  void increaseCounter(){
    counter++;
  }

  @override
  Widget build(BuildContext context){   // UI 만드는 부분
    return new MaterialApp(             // MaterialApp Design(구글 기본 디자인) 사용해서 앱 만듦
      title: 'Flutter App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar : AppBar(title: Text("Title")),  //앱의 상단 타이틀
        body : Container( //Conainer에 넣어서 마진이나 패딩을 주도록 함.
          child: Column(  //세로로 위젯들 배열
            children: <Widget>[
              Text("$counter"),
              RaisedButton(
                child: Text(
                  "Add $counter",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
                onPressed:(){ //클릭할 때 마다 counter 변수가 변하도록~!
                  increaseCounter();

                },
              ),
            ],

          ),

        ),
      ),
    );
  }
}

문제: 버튼 아무리 눌러도 위젯 변하지 않음. 

<- Stateless Widget을 사용했기 때문!

이렇게 위젯이 변하는 경우에는 StatefulWidget을 사용해야 함.

 

(2) StatefulWidget    (다시~!)

State & Wiget으로 나뉜다. -> 변화하는 부분만 따로 관리!

실제 UI 그리는 코드는 State 쪽에 있음.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());    // 앱 실행

class MyApp extends StatefulWidget{ // Widget 과 State를 다루는 부분은 분리되어 있음

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  void increaseCounter(){
    setState(() {
      counter++;
    });
  }
  void decreaseCounter(){
    setState(() {
      counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "First Stateful App",
      home: Scaffold(
        appBar: AppBar(
          title : Text("My StatefulWidget"),
        ),
        body : Container(
          padding: const EdgeInsets.all(16.0), // 16씩 패딩

          child: Column(
            children: <Widget>[
              Text(
                "$counter",
                style: TextStyle(fontSize: 160.0)
              ),
              Row(  //가로로 위젯 배치
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  RaisedButton(
                    child: Text(
                      "Add",
                      style: TextStyle(color: Colors.white),
                    ),
                    color : Colors.red,
                    onPressed: (){
                      increaseCounter();
                    },
                  ),
                  RaisedButton(
                    child: Text(
                      "Subtract",
                      style: TextStyle(color: Colors.white),
                    ),
                    color: Colors.blue,
                    onPressed: (){
                      decreaseCounter();
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

  }
}

 

* 참고: https://software-creator.tistory.com/10?category=681555

Flutter Layout - 첫 플러터 앱 만들어보기