flutter 기본

플러터는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크로 쉽게 예쁜 앱을 제작할 수 있다.

언어는 Dart를 기반으로 하고 있고, Dart는 다른 프로그램 언어의 기본적인 내용을 알고 있다면 쉽게 배울 수 있다. 

클래스, 메소드 등을 이해하고 있다면 어렵지 않아보인다..

 

플러터의 핵심은 widget, widget widget! 다 위젯이다.

 

자바처럼 main 함수가 있다. 한줄일때는 화살표 함수로 나타낼 수 있으며 괄호도 생략이 가능하다.

......그나저나 플러터가 안드로이드보다 리소스를 많이 먹는지 맥북에어에서 apk가 만들어지지 않는다 무한로딩이다

안드로이드를 겨우 버텨내는 2013 맥북에어.....버리고 싶다.

 

처음에 import 인 부분을 보면  dart를 사용한다는 것을 알 수 있다. 

메인함수의 home  property에 아래 클래스인 Home()을 주어서 home 부분에는 아래 클래스가 실행된다.

 

Home 클래스는 StatelsessWidget을 상속받는다.

위젯에는 Stateless vs Stateful이 있는데

Stateless 는 시간이 지나면서 바뀔 수 없고, 

Stateful은 시간이 지나면서 바뀔 수 있다.

 

클래스 Home에서 StatelessWidget을 상속받으면 Widget build 메소드를 재정의하게 되어있다. 리턴타입은 위젯이된다.

 

커스텀 폰트를 쓰거나 이미지를 쓰고 싶다면 yarn xml에 추가를 해주면 되는데, 이 파일은 공백 하나가 아주 중요하다. 공백을 하나 더치면 dependencies 추가가 안된다. 공백을 제대로 확인하자.

 

이미지는 asset 폴더를 만들어 안의 이미지를 추가해서 쓰거나

네트워크 상의 url을 넣으면 이미지가 바로 보인다. 신세계다.

안드로이드에서 네이버 검색 pai의 썸네일 url 스트링을 가져올 때는 glide 라는 라이브러리를 사용했는데, 라이브러리를 사용하면 보다 간편하지만 플러터에 비해서는 간편하지 않고, 라이브러리 없이 url을 이미지로 변환시키기란 코드가 너무 길어진다. 내가 제대로된 방법을 모르는 것일지도..

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Home()
));


class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {// return Widget
    return  Scaffold( //wrapper for some widgets
      appBar: AppBar( // property : widget (value) 이런식으로 작성해야함
        title: Text('my  first app'),
        centerTitle: true,
        backgroundColor: Colors.red[600],
      ),
      body: Center(
        child: Image.asset('assets/blue.png'),
        //Image.network(''),
        /*Image(
          image: AssetImage('assets/blue.png'),
          //image: NetworkImage('https://images.unsplash.com/photo-1536746803623-cef87080bfc8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=332&q=80'),
        ),*/
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Text('click'),
        backgroundColor: Colors.red[600],
      ),
    );
  }
}

액션바는 눌렀을 때 함수가 수행되도록 일단 빈 () {}를 넣는다. 클릭하면 함수가 수행되게 나중에 만들 것이다.

child 에는 텍스트 위젯을 넣어 click이라는 글자를 넣고 배경색도 설정해준다.