🖥 Flutter

🌟 Flutter 강의

플러터 시작
플러터 설치
카운팅 앱 만들기
레이아웃 튜토리얼

👩🏽‍💻 강의 내용 정리

플러터(Flutter)란?

"dart"라는 언어를 사용하는 모바일용 개발 플랫폼이다.
IOS와 Android를 모두 한번에 개발할 수 있는 클로스 플랫폼을 지원한다.
dart라는 언어를 사용함으로 네이티브 성능을 낼 수 있다. (네이티브 코드를 사용해 속도가 빠르다.)
* flutter 사이트: https://flutter.dev

* Cross Platform이란 여러 종류의 컴퓨터 플랫폼에서 동작할 수 있다는 것을 뜻하는 용어이다. (= 멀티플랫폼 소프트웨어)

카운팅 앱 만들며 기본 구조 파악하기

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// st => stateless를 선택하면 stateless 코드가 생성됨.
// StatelessWidget은 바뀌지 않는 정적인 것이다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return MaterialApp(
   title: 'Flutter Demo',
   theme: ThemeData(primarySwatch: Colors.blue),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
 );
}
}
//option + enter를 통해 class 생성 가능
// StatefulWidget은 바꿀 수 있는 것이다.
class MyHomePage extends StatefulWidget {
//강의 영상과는 다르게 KEY key라 쓰면 오류가 남. - Key can't have a value of "null" (💥 trouble shooting)
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// _가 의미하는 것은 private를 의미함. - 클래스 내부에서만 사용하는 것들 (보안적인 요소)
int _counter = 0;
@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(title: Text(widget.title),),
   //가운데로 정렬
   body: Center(
     child: Column(mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[
       Text('You have pushed the button this many times: '),
       Text('$_counter', style: Theme.of(context).textTheme.headline4)
     ],
     ),
   ),
   floatingActionButton: FloatingActionButton(
     onPressed: _incrementCounter,
     // 도움말
     tooltip: 'Increment',
     child: Icon(Icons.add),
   ),
 );
}
void _incrementCounter() {
 setState((){
   _counter++;
 });
}
}

2.1. stateless와 stateful의 차이

stateless : 이전 상태를 기록하지 않아 작업을 진행하다 접속이 끊어질 경우, 작업을 새로이 시작해야 한다.
stateful : 사용자의 요청을 서버가 기록하고 있어 작업을 진행하다 접속이 끊어지더라도 이전에 기록된 단계에서 부터 다시 시작하면 된다.

2.2. flutter 정렬하기 - MainAxisAlignment, CrossAxisAlignment

mainaxis는 주축, crossaxis는 횡축을 의미한다.
행의 경우 main axis는 가로를 기준으로 하고 cross axis는 세로를 기준으로 한다.
열의 경우 main axis는 세로를 기준으로 하고 cross axis는 가로를 기준으로 한다.

2.3. MainAxisAlignment와 CrossAxisAlignment 예시

- MainAxisAlignment

1) MainAxisAlignment.center: row일 경우, 가록축 기준으로 가운데 정렬 / column의 경우, 세로축 기준으로 가운데 정렬
2) MainAxisAlignment.start: row일 경우, 가록축 기준으로 왼쪽 정렬 / column의 경우, 세로축 기준으로 위쪽으로 정렬
3) MainAxisAlignment.end: row일 경우, 가록축 기준으로 오른쪽 정렬 / column의 경우, 세로축 기준으로 아래쪽으로 정렬
4) MainAxisAlignment.spaceEvently: child widget 사이의 여유 공간을 모두 균등하게 배분
5) MainAxisAlignment.spaceBetween: child widget을 시작과 끝에 배치하고 위젯 사이의 여유 공간을 모두 균등하게 배분
6) MainAxisAlignment.spaceAround: 첫번째와 마지막 child 앞 뒤의 여유공간을 나머지 child와 공간의 절반만큼 배치

- CrossAxisAlignment

1) CrossAxisAlignment.center: row일 경우, 가록축 기준으로 가운데 정렬 / column의 경우, 세로축 기준으로 가운데 정렬
2) CrossAxisAlignment.start: row일 경우, 가록축 기준으로 위쪽 정렬 / column의 경우, 세로축 기준으로 왼쪽 정렬
3) CrossAxisAlignment.end: row일 경우, 가록축 기준으로 아래로 정렬 / column의 경우, 세로축 기준으로 오른쪽 정렬
4) CrossAxisAlignment.stretch: 좌우를 꽉차게 배치 5) CrossAxisAlignment.baseline: row일 경우, 수평 정렬 / column의 경우, 수직 정렬

2.4. 레이아웃 배치와 반응형 앱 연습

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

//💥 trouble shooting - type 'MyApp' is not a subtype of type 'StatelessWidget'"
// https://stackoverflow.com/questions/51334839/another-exception-was-thrown-type-myapp-is-not-a-subtype-of-type-statelesswi
// MyApp을 변경할 경우 restart 해야 함.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  bool _isStared = true;
  int _count = 41;

  @override
  Widget build(BuildContext context) {
    //MainAxisAlignment와 CrossAxisAlignment로 정렬할 수 있다.
    var titleSection = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Cat is so cute.',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26)),
            Text('This is layout practice.',
                style: TextStyle(color: Colors.grey, fontSize: 26)),
          ],
        ),
        //padding 설정
        Padding(padding: EdgeInsets.all(10.0),),
        //Icon의 크기 설정 가능
        //삼항 연산자 사용 Bool ? A : B
        IconButton(
          onPressed: _pressedStar,
          //icon button 안에 icon이 들어가는 형식
          icon: (_isStared ? Icon(Icons.star) : Icon(Icons.star_border)),
          color: Colors.deepOrange,),
        Text('$_count', style: TextStyle(fontSize: 30),)
      ],
    );

    var buttonSection = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[

        Column(
          children: <Widget>[
            Icon(Icons.call, size: 30, color: Colors.lightBlue,),
            Text("CALL", style: TextStyle(color: Colors.lightBlue),)],
        ),

        Padding(padding: EdgeInsets.all(40.0),),

        Column(children: <Widget>[
          Icon(Icons.near_me, size: 30, color: Colors.lightBlue,),
          Text("ROUTE", style: TextStyle(color: Colors.lightBlue),)],
        ),

        Padding(padding: EdgeInsets.all(40.0),),

        Column(children: <Widget>[
          Icon(Icons.share, size: 30, color: Colors.lightBlue,),
          Text("SHARE", style: TextStyle(color: Colors.lightBlue),)],
        ),
      ],
    );

    // Container에 padding을 넣을 경우, 위 아래 양 옆에 다 들어간다.
    var textSection = Container(
      child: Text(
          "The cat (Felis catus) is a domestic species of a small carnivorous mammal."
              " It is the only domesticated species in the family Felidae and "
              "is often referred to as the domestic cat to distinguish it from the wild "
              "members of the family. A cat can either be a house cat, a farm cat or"
              " a feral cat; the latter ranges freely and avoids human contact."
              " Domestic cats are valued by humans for companionship and their ability to"
              " kill rodents. About 60 cat breeds are recognized by various cat registries.",
          style: TextStyle(fontSize: 15)),
      padding: EdgeInsets.all(20.0),
    );

    return Scaffold(
      body: Column(
        //외부 링크로부터 사진을 받아와서 표시하는 것은 network로 수행한다.
        children: <Widget>[
          Image.network("https://user-images.githubusercontent.com/61380136/150347579-6cd5462e-0a75-467a-a0f2-2dd9c16d3744.png",
            height: 240, width: 600, fit: BoxFit.cover,),
          Padding(padding: EdgeInsets.all(10.0),),
          titleSection,
          Padding(padding: EdgeInsets.all(1.0),),
          buttonSection,
          //Padding(padding: EdgeInsets.all(1.0),),
          textSection,
        ],
      ),
    );
  }

  void _pressedStar() {
    setState(() {
      if (_isStared){
        _isStared = false;
        _count -= 1;
    } else{
        _isStared = true;
        _count += 1;
      }
    });
  }
}

- 실행 화면

💥 Trouble Shooting 💥

Ctrl + Space 해도 어떤 속성을 사용할 수 있는지 안뜨고 Spot light가 뜨는 문제
=> 환경 설정에서 해당 단축키를 변경한다.
Key can't have a value of "null"
=> 오류 발생 원인: null safety가 활성화되었기 때문이다. null이 될 수 없는 매개변수나 키가 null 값을 가지지 않도록 한다.
=> 해결방법: null이 들어갈 수 있음을 나타내도록 하는 ?와 값이 꼭 들어가야 한다고 표시해야 하는 required를 사용하여 error를 해결했다.

# 해당 오류를 해결할 수 있는 다양한 방법
1) required:
2) Default value:
3) Nullable parameter:
4) Positional parameters:

📝 참고 자료

저작자표시 비영리 (새창열림)