[플러터] 플러터 프로젝트 방치후 재개발시 버전 업데이트

Computer 비관심/Flutter|2022. 6. 25. 08:32
반응형

오랜기간 프로젝트를 방치뒤 다시 개발을 하려하니 빌드가 안된다.

0. 플러터버전을 업그레이드 하고 싶으면..(옵션)

flutter upgrade

 

1. android > app > build.gradle에서

// 컴파일 버전을 바꿔줌
android {
    compileSdkVersion 31
    
//타깃 버전을 바꿔줌
defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.sean.ohhmystock"
        minSdkVersion 19
        targetSdkVersion 31

2. projectName/android/build.gradle

ext.kotlin_version = '1.6.10' //

 

3. 바꾸라고 나오는거 다 바꿔줌

댓글()

[에디터 잘써먹고 스타일 잘해보기] 플러터 위젯 이해하기

Computer 비관심/Flutter|2021. 7. 17. 00:53
반응형

플러터 위젯 이해하기

여기서는 플러터를 시작하는 많은 사람들이 중요하지만 놓칠 수 있는 부분을 설명하려고 한다. 

플러터는 위젯으로 구성되어 있다. 그렇기 때문에 위젯을 이해해야 쉽게 웹사이트 혹은 어플리케이션을 만들 수 있다.

HTML의 구성요소들은 인터넷에 찾으면 쉽게 찾을 수 있다. 그리고 그걸 어떻게 원하는데로 스타일을 할지도 쉽게 찾을 수 있다. 

 

하지만 플러터는 신상프레임워크이기 때문에 우리가 찾기가 어려울 수도 있다. 그런데 플러터는 텍스트에디터의 도움을 아주 잘 받았다.  텍스트에디터를 잘 이용하면 위젯의 속성명과 거기에 들어가야하는 값이 무엇인지 알 수 있다. 이게 아주 중요하다. 개발의 이걸 알고 개발을 하고 모르고 개발을 하냐에 따라서 개발의 속도가 크게 차이가 난다. 

 

특히나 HTML에 익숙하지만 플러터는 스타일이 어렵다고 느끼면 HTML과 플러터의 차이를 분석해 봐야 할 필요가 있다.

예를 들면 Text위젯 위에 마우스 커서를 올리니 텍스트위젯의 다양한 속성들과 들어가야 할 값이 나온다.

우선 Text() 데이터 값이 들어가야한다 데이터형은 문자형이다. ?가 없기 때문에 nullable이 아닌것을 알 수 있다. 꼭 적어야한다. 

 

글자의 크기를 크게 만들고 싶은데 안에 보이는게 TextStyle? style이 보인다. {}중가로 안에 들어 있으니 속성을 명시한다. 즉 속성명은 style이고 거기에 들어가야 하는 값은 TextStyle 형이다. TextStyle()위젯은 TextStyle형일테니 일단 TextStyle()을 넣어본다. TextStyle이 abstract는 아니니 사용할 수 있는 위젯이다.

Text('HELLO WORLD', style:TextStyle())

 아직 글씨 크기를 설정하는 것을 하나도 넣지 않았다. 그러면 TextStyle에 어떤 속성과 값이 들어가야 우리가 원하는 것을 이룰 수 있을지 확인해 보자.

오케이! 찾았다. 딱봐도 fontSize가 속성이고 거기 들어가는 값은 double 즉, 실수 이다.  그럼 30.0을 넣어본다.

크기가 아주 잘 변한다!

플러터는 이렇게 속성명과 속성에 들어가야하는 것을 에디터를 통해 쉽게 찾을 수 있다. HTML은 CSS가 따로 분리되어 있기 때문에 외우기가 쉽다. 그리고 속성명과 값이 단순하다. 

하지만 플러터는 거기에 필요한 속성과 다양한 위젯을 알아야 하기 때문에 외우기가 더 어렵다. 게다가 속성명과 거기에 들어가는 위젯의 이름이 길기도 하다. 인터넷에서 하나하나 찾으려는 것도 고역이고 도데체 멀써야 이게 되고 멀써야 이게 되는지 알기도 어렵다. 

 

하지만 이러한 방식을 찾아서 하면 쉽게 스타일을 만들고 위젯에 필요한 것들 보고 직관적으로 이것이 필요할 것이라고 추축할 수 있다.

 

한게만 더 해보자

우리가 처음 앱을 만들면 실행되는 화면이다. 여기서 Column위젯을 구경해 볼 것이다.

아래 스크린샷을 보듯 mainAxisAlignment: MainAxisAlignment.center로 되어있다. 왜 기본앱에 이런 디자인이 되어있을까?

이유는 Column위젯의 속성과 속성값을 보면 알 수 있다.

 

 

 

모든 속성들이{}로 감싸져 있다. 즉, 속성의 이름: 속성값 형식으로 속성을 넣어줘야 한다.

그리고  mainAxisAlignment = MainAxisAlignment.start로 되어있다. 이건 mainAxisAlignment의 속성이 defualt로 MainAxisAlignment.start로 되어있다는 것이다. 만약 저 mainAxisAlignment: MainAxisAlignment.center를 지워버리면 

기본 디폴트값인 MainAlignment.start로 가고 아래 스크린샷 처럼 되어버리고 만다.

 

우리가 많이쓰는 Container 위젯을 보자. 여기에 만약 border radius를 넣고 싶으면 어떻게 해야할까?

딱보니 decoration속성에 radius관련 된게 있을 것 같다. decoration의 값은 형을 보니 Decoration()이 아닐까?

아쉽게도 Abstract class라 사용하지 못하고 이것을 통해 만들어진 다른 클레스를 사용해야 한다.

그럼 무엇을 사용 해야 할까? decoration속성 뒤에 :(콜론)을 찍고 조금 기다리니 여기에 들어갈 수 있는 것들과 다양한 위젯들이 나온다

(***리스트의 아래쪽은 못 들어가는 것도 나오기 때문에 추천하는것에서 데이터의 타입을 확인해봐야 한다.).

박스데코레이션을 선택해봤다.

border속성에 BoxBorder 타입이 들어간다. 한번 BoxBorder위젯을 넣어보자.

 

드럽게 많이 나온다. 뭐를 넣어야 내가 원하는게 나올지 예측이 안된다.... 이정도면 그냥 검색이 빠르겠다. ㅎㅎㅎ 

이럴땐 검색 추천

 

 

갓 시작하신 분들이나 웹에서 CSS에 익숙하신 분들이 도움이 될 수도 있는 부분이 있었으면 좋겠네요.

 

 

 

 

 

댓글()

플러터 listView와 sliverList 으로 리스트 그리기

Computer 비관심/Flutter|2021. 6. 26. 23:57
반응형

Front는 과연 무엇일까 하는 생각이 들었다.

심플하게 말하자면 데이터를 보기 좋게 뿌려주는 것이다. 그것을 UI라고 한다.

그 중에 가장 기본이 되는 것은 어떻게 반복되는 형식을 front에 뿌려주는 것인가 일 것이다.

 

flutter의 sliverList와 ListView가 기본적으로 많이 사용되는 리스트 위젯일 것이다. 

이들은 index는 0부터 시작해서 정해진 아이템(자식)의 숫자만큼 반복할 것이다.

 

아래를 보면 listview.build메서드의 프로퍼티에 itemCount를 전달한다. 그러면 build메서드는 이렇게 전달받은 카운트 만큼 반복을 하며 itembuilder에 넣은 함수에 index를 전달할 것이다.  

 

sliverList역시 딜리게이션에 context와 index를 전달 하는 함수를 만들고

이렇게 전달받은 바뀐 index를 가지고 위젯을 만들어낸다.

 

builder에 보여지는 만큼 위젯이 만들어지는 기능을 지니고 있다.

//자바스크립트였으면 이렇게 했을 것이다.(레이지로딩이 없다면)
for(let index = 0; index < 10; index++){
	console.log(index)
}

//혹은 vuejs
<li v-for="i in 10">
	<div>{i}</div>
</li>


------------------------------
// 플러터 listView
// 열개의 자식들 itemCount에 리스팅할 자식의 갯수 넣음
ListView.builder(
  itemCount: 10,
  itemBuilder: (BuildContext ctxt, int index) {
  return new Text(index.toString());
}),


//플러터 sliverList

SliverList(
  delegate: SliverChildBuilderDelegate(
  (BuildContext context, int index) {
    return Card(
      margin: EdgeInsets.all(15),
      child: Container(
        color: Colors.blue[100 * (index % 9 + 1)],
        height: 80,
        alignment: Alignment.center,
        child: Text(
          "Item $index",
          style: TextStyle(fontSize: 30),
          ),
        ),
    );
  },
  childCount: 10, // 10 list item <-listCount 와 같음
  ),
),

 

댓글()

플러터SQLFLITE 업데이트 포함

Computer 비관심/Flutter|2021. 5. 12. 01:20
반응형
import 'dart:async';
import 'package:flutter_sqlite_demo/models/model.dart';
import 'package:sqflite/sqflite.dart';

abstract class DB {

    static Database _db;

    static int get _version => 1;

    static Future<void> init() async {

        if (_db != null) { return; }

        try {
            String _path = await getDatabasesPath() + 'example';
            _db = await openDatabase(_path, version: _version, onCreate: onCreate, onUpdate:_onUpdate);
        }
        catch(ex) { 
            print(ex);
        }
    }

    static void onCreate(Database db, int version) async =>
        await db.execute('CREATE TABLE todo_items (id INTEGER PRIMARY KEY NOT NULL, task STRING, complete BOOLEAN)');
	
    // 버전을 올린 뒤에 사용하는 코드, 버전을 올리면 새로 만들때도 memo TEXT를 넣어줘야 함
    static void _onUpgrade(Database db, int oldVersion, int newVersion) {
    if (oldVersion < newVersion) {
      db.execute("ALTER TABLE todo_items ADD COLUMN memo TEXT;");
      }
    }
    
    static Future<List<Map<String, dynamic>>> query(String table) async => _db.query(table);

    static Future<int> insert(String table, Model model) async =>
        await _db.insert(table, model.toMap());
    
    static Future<int> update(String table, Model model) async =>
        await _db.update(table, model.toMap(), where: 'id = ?', whereArgs: [model.id]);

    static Future<int> delete(String table, Model model) async =>
        await _db.delete(table, where: 'id = ?', whereArgs: [model.id]);

댓글()

플러터 버그

Computer 비관심/Flutter|2021. 5. 3. 01:10
반응형

Error: Assertion failed:

package:flutter/…/painting/text_painter.dart:881

!_needsLayout

is not true

at Object.throw_ [as throw] (http://localhost:59075/dart_sdk.js:5037:11)

at Object.assertFailed (http://localhost:59075/dart_sdk.js:4976:15)

at text_painter.TextPainter.new.getPositionForOffset (http://localhost:59075/packages/flutter/src/painting/placeholder_span.dart.lib.js:1331:38)

at paragraph.RenderParagraph.new.hitTestChildren (http://localhost:59075/packages/flutter/src/rendering/paragraph.dart.lib.js:605:45)

 

댓글()

[플러터] 플러터 애드몹 달기

Computer 비관심/Flutter|2021. 5. 1. 00:16
반응형

플러터에서 애드몹을 달때 사용하던 패키지가 기존에 firebase_admob에서 pub.dev/packages/google_mobile_ads 이걸로 바뀌었다.

 

광고 다는 법은 공식 사이트에 나온 그대로 따라하면 된다. 설명이 쉽게 나와있다.

 

기존의 애드몹은 자동으로 맨 밑 바닥에 광고를 붙여줬는데 새로운 애드몹 패키지에선 위젯으로 만들어 자신이 원하는 위치에 붙일 수 있다.

 

 

 

그런데 저 광고 패키지를 설치 할때 에러 때문에 고생했는데 

원인은 gradle을 업데이트 해야했다

.

 

1. gradle\wrapper\gradle-wraper.properties 여기에 들어가 아래의 배포버전을 넣는다.

distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip

 

 

2. android\build.grale에서 버전을 수정한다.

dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'

 

 

그리고 플러터에서 오래된 패키지들을 확인 할 수 있는 방법

 

flutter pub outdated 를 치면 오래된 패키지들의 버전과 최신버전들이 나온다.

 

flutter packages upgrade 를 치면 모두다 업데이트 된다. 

 

귀찮다고 방치하기보단 자주 업데이트 해서 고생하지 않는게 좋은거 같다.

 

 

 

댓글()

[플러터] 플러터 장점과 단점.

Computer 비관심/Flutter|2021. 4. 24. 23:37
반응형

웹개발을 했었고 자바는 전혀 모르고 자바스크립트와 파이썬만 알았다.

vuejs 와 svelte만 쓰다 보니 플러터가 자꾸 손에 익지 않았다. 

그나마 좀 익은 시점에 글을 써본다.

 

(플러터가 업데이트 하는 속도가 엄청 빠르다. 8개월 적은 글인데 오래된 얘기가 된것들이 많다. 2011/12월 다시 한번 체크 하였으며 이전의 단점들이 더 이상 큰 단점이 아니거나 단점이 아니다. 결론은 아직도 웹에 비해 더 어렵다는 생각이 들지만 앱을 만들기에 좋고 편리하다.)

 

일단 단점부터 적자면 (주관적임)

1. HTML로 레이아웃을 만드는 것에 비해 가독성이 떨어진다고 생각됬다. 리액트도 클래스안에 UI를 만드는 것이지만

<>로 UI가 구별되는게 나에겐 더 쉬웠다.

(2021/12 가독성도 그렇지만 html tailwindcss 쓰는것 보단 사용하기 어렵다.)

 

 

2. DARTPAD

스벨트웹 REPL은 재미로 시간이 남을때 쓱쓱 적어놓고 나중에 옮겨서 사용할 수 있도록 잘 되어있었고 속도 역시 빨랐다. DARTPAD는 느리고 자동완성도 없고 한파일로 사용해야하는게 불편해서 시간이 남을때 잠깐 기능이나 위젯 하나나 만들자 이런 생각을 하기 어려웠다.

(2021/12 로그인이 없고 아직도 사용하기 불편하다. 사실 별 실제 개발하는데 큰 문제는 없다.)

 

 

3. hot reload 와 hot restart 의 버그

아직도 hot reload와 hot restart에 버그가 발생하고 기다리다가 안되서 다시 정지했다가 켜야했다.

(현재 2021/12: 별 문제가 없다. )

 

 

4. 웹사이트

웹지원 버전이 정식으로 지원 되었지만 아직 갈길이 먼거 같다. 웹으로 보면 좀 이상한 요소들도 있고... 디버깅도 난 잘 모르겟다.

(2021/12 그전에는 한글에서 치명적인 버그가 있었는데 지금은 SEO도 개선 방법들이 좀 나온것 같다. 그러므로 그리 큰 문제가 없어보인다. 스벨트 vs 플러터 웹???  웹을 만들어야 할 때 한글입력에 문제가 있어서 스벨트를 썼는데 플러터로 웹을 만들었으면 어떨지 궁금하다. )  

 

 

5. 설치하는데 오래걸림

일단 받아 놓고 설치해 놓으면 상관 없지만 처음에 시작할 때 용량과 시간 때문에 오래걸렸다. 

동남아에서 인터넷을 사용하기 때문에.... 좀 힘들었다.

 

 

6. 구글에 대한 불안감...

네비게이션 2.0을 보고 .... 예전에 구글이 앵귤러제이에스 버전업그레이드 했을때...생각이 났다.

(2021/12 구글에서 아직도 잘 밀어주고 있는거 같다.)

 

 

 

장점(역시 주관적)

1. 다트 그 자체다.

프로그래밍을 대학교에서 깊게 배우지도 않았고 학원에서도 얕게 배웠고 

프로그래머로 일할때도 구조를 만들기 보단 자바스크립트로 기능을 구현하기만 하면 됬기 객체지향에 대한 지식이 많이 떨어졌다. 

 

자료형과 인터페이스 앱스트렉트 등등 여러가지를 새로 익혀야 했다.

이걸 익힐때 자바로된 자료를 가지고 공부했는데 큰 도움이 됬고 자바와 비슷한 점이 많았다. 

자바를 다루는데 익숙한 개발자는 쉽게 사용할 수 있을 것 같다.

 

그리고 다트를 잘 알면 플러터를 배우는데 딱히 어려운 내용도 없다.

 

뷰나 스벨트를 예를 들면 자바스크립트를 잘 알면 뷰나 스벨트가 익혀지는게 아니라 

뷰와 스벨트를 만든 사람이 정의해 놓은 것들을 잘 알면 익혀진다.

(그래서 그런지 쉽게 사용할 수 있게 만들어 놓은거 같다.. 근데 어째튼 언어 자체가 아니라 프레임워크를 배우는 느낌이었다.)

 

어째튼 Dart만 알면 구조도 원하는 데로 바꿀 수 있고 쉽게 개발할 수 있을 것이다. 개발속도도 자바스크립트 못지 않게 빠르게 만들 수 있다.

 

 

2. Visual Code에서 사용하기 너무 좋다.

자동으로 완성하는 기능들도 잘 되있고 정렬까지 깔끔하게 해준다. 패키지도 알아서 자동 설치해준다.

마우스 오른쪽키를 눌러서 새로운 위젯으로 둘러 싸거나 지우는 것도 쉽게 할 수 있다. 왜 이렇게 잘 지원이 되고 있는지 놀랍다.

 

 

3. 모바일에서 편하고 빠르다.

리액트네이티브와 네이티브스크립트에서 리스트에 텍스트필드를 넣는 테스트를 해봤는데

확실히 플러터가 속도가 가장 빨랐다. 리액트네이티브와 네이티브스크립트에서 텍스트필드를 넣는 방법이 잘못되서 버벅거리고 느린건지 몰라도... 

 

웹은 몰라도 모바일에서는 더 빨리 실행되고 이상한 버그들도 적었다. (갑자기 빌드가 안되거나..)

 

 

 

결론

자바를 기반으로 개발을 했으면 플러터 괜찮은 것 같다. 웹까지 개선된다면 플러터는 정말 좋은 선택이 될 것이다.

 

자바스크립트와 HTML CSS가 손에 익고 자바나 타입스크립트를 모르는 웹개발자라면 플러터를 배우는데 시간이 좀 걸릴 것이다. 지적 호기심이나 재미가 아니라면 웹기술을 가진 사람이 굳이 플러터를 해야하나 생각이 들기도 한다. (워낙에 리액트네이티브도 좋고 네이티브스크립트도 좋아졌다보니...)

그런데 뭐... 프로그래밍은 툴일 뿐이니... 접해본다면 그 툴에서 좋은 방식을 배워올 수 생각한다. 

 

(2021/12 이글은 오래된 글이었다. 지금은 이전 이전에 있었던 버그들이 많이 사라졌고 한국어로된 강의도 리액트네이티브 못지 않게 많이 나왔다. 웹의 성능도 이전 보다 좋아졌기 때문에 플러터를 사용하면 왠만한 앱/웹 어플리케이션을 빠르게 만드는데 도움이 될 것이다.) 

 

 

 

 

 

 

 

댓글()

플러터 처음 빨리 시작하기~

Computer 비관심/Flutter|2021. 4. 23. 01:04
반응형

1. 폴더구조

플러터개발시작시 유튜버들이 많이 사용하는 폴더구조

 

2. 스타일에 사용될 상수 만들기

디자인과 관련된 상수를 가진 색상 클래스, 엘리먼트 형태관련 클래스를 만들어서 디자인을 쉽게 하기

 

3. 데이터 모델 만들기

사용할 데이터의 형태를 지정하기 위해 데이터 모델만들기

 

4. 실제 사용하거나 UI디자인/테스트를 위한 데이터 만들기

개발중 데이터를 제공할 파일을 만듬

 

5. 여러개의 스크린을 불러올 수 있는 스크린콜랙션파일 생성 (Optional)

 

6. 여러개의 위젯을 불러올 수 있는 위젯콜렉션파일 생성

 

7. 웹을 위한 반응형 위젯 만들기

 

8. 데이터 오브젝트나 오브젝트 리스트를 json으로 바꾸기

 

9. 스트링으로 된 Json을 리스트로 바꾸기

 

10. GetX로 상태관리

GetX를 통해 state를 관리

 

11. GetX List 읽고 쓰고 수정하고 지우기

 

기타 미분류

플러터 위젯에 대해

 

 

 

 

1. 폴더구조

- assets/icons -svg

- assets/images -png

-lib/controllers

-lib/models - xxx_model.dart

-lib/screens - xxx_screen.dart

-lib/services

-lib/widgets 

-lib/configs/palette.dart

 

 

2. 스타일에 사용될 상수 만들기

lib/configs/pallette.dart

공통으로 쓰일 칼러지정

class Palette {
	static const Color PrimaryColor = Color(0xFF473F97);
}

 

materialApp / GetMaterialApp의 theme 속성을 사용할시

 

 

theme: ThemeData(
  // 앱바의 배경색과 글자의 색과 형태를 설정
  appBarTheme: Const AppBarTheme(backgroundColor: Palette.background, title: TextStyle( color: Colors.white, fontSize: 18,)),
  // 배경색을 설정
  sccaffoldBackgroundColor: Palette.background,
  // The background color for major parts of the app (toolbars, tab bars, etc)
  primaryColor: Colors.white,
  //버튼 등 색상
  accentColor: Palette.green,
  iconTheme: const IconThemeData(color: colors.black),
  fontFamily: GoogleFonts.montserrat().fontFamily,
  textTheme: GoogleFonts.montserratTextTheme(),
),
home: 홈스크린으로 사용할 위젯

 

 

 

lib/configs/styles.dart

공통으로 쓰일 엘레멘트의 스타일 지정

class Styles {
	statics const buttonTextStyle = TextStyle(
     fontSize:16.0,
     fontWeight: FontWeight.w600);
    
    statics const ChartTextStyle = TextStyle(
     color:Clors.grey,
     fontSize:16.0,
     fontWeight: FontWeight.w500);
    
    statics const tapTextStyle = TextStyle(
     fontSize:16.0,
     fontWeight: FontWeight.w600);
}

 

or

 

lib/configs/consts.dart

const kTextColor = Color(0xFF535353);
const kTextLightColor = Color(0xFFACACAC);
const kDefaultPadding = 20.0;

 

 

3. 데이터 모델

lib/model/product.dart

class Product {
string a, b, c;
	product ({this.a, this.b, this.c})
}

 

Json로 클래스를 만들어주는 사이트 - 여기서 쉽게 데이터 모델을 만들 수 있다.

javiercbk.github.io/json_to_dart/

 

 

4. 실제 사용하거나 UI디자인/테스트를 위한 데이터 만들기

lib/data/data.dart

List<Map> categories = [{"name":"music","icon": Icons.music_note,} {...},{...}];


List<Product> icecreamProducts = [
Product(a:'a',c:'ass',b:'ddd'),
Product(a:'a',c:'ass',b:'ddd'),
Product(...),
Product(...),
Product(...),
];

List<Product> chocolateProducts = [
Product(a:'a',c:'ass',b:'ddd'),
Product(a:'a',c:'ass',b:'ddd'), 
Product(...)
];

 

 

5. 여러개의 스크린을 불러올 수 있는 스크린콜랙션파일 생성

lib/screens/screens.dart

스크린들을 불러오는데 사용

(Marcus Ng 유튜브 비디오 참조)

 

export 'bottom_nav_screen.dart';
export 'home_screen.dart';
export 'stats_screen.dart;

 

 

6.  여러개의 위젯을 불러올 수 있는 위젯콜렉션파일 생성

lib/widgets/widgets.dart

위젯 불러오는데 사용

(Marcus Ng 유튜브 비디오 참조)

 

 

7. 웹을 위한 반응형 위젯 만들기

lib/widgets/responsive.dart

import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;
  Responsive({Key key, @requred this.mobile, this.tablet, @required this.desktop})
      : super(key: key);

  static bool isMobile(BuildContext context) => 
    MediaQuery.of(context).size.width < 800;
  
  static bool isTablet(BuildContext context) => 
    MediaQuery.of(context).size.width >= 800 &&
    MediaQuery.of(context).size.width < 1200;
    
  static bool isDesktop(BuildContext context) => 
    MediaQuery.of(context).size.width >= 1200;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.maxWidth >= 1200) {
        return desktop;
      } else if (constraints.maxWidth >=800) {
        return tablet ?? mobile;
      } else {
       return mobile;
      }
    });
  }
}

 

 

8. 데이터 오브젝트나 오브젝트 리스트를 json으로 바꾸기

List<Product> dataList =[
Product(name:'Product A', price:3700),
Pproduct(name:'Product B', price:3800),
]

String jsonDataList = jsonEncode(dataList);

 

bezkoder.com/dart-flutter-convert-object-to-json-string/

 

 

9. 스트링으로 된 Json을 리스트로 바꾸기

List dataList = jsonDecode(jsonDataList);
dataList.map((data) => Stock.fromJson(data)).toList();

stackoverflow.com/questions/51053954/how-to-deserialize-a-list-of-objects-from-json-in-flutter

 

 

10. GetX로 상태관리

 


// 데이터를 받아와야 할때
class MyStocksCtr extends GetxController {
  List<dynamic> products = [].obs;
  @override
  void onInit() {
    products.assignAll(datas); // 이렇게 말고 asyn 함수를 만들어야 함
    super.onInit();
  }
}

 

class MyStockScreen extends StatelessWidget {
  final MyStocksCtr controller = Get.put(MyStocksCtr());
  
  ...
  
  
  
  child: Obx(() {
            return ListView.builder(
                 itemCount: controller.products.length,
                 itemBuilder: (context, index) {
                   final Stock stock = controller.products[index];
                   return CustomCard(stock: stock);
                  }
              );
            },
          ),

 

 

쓰기 controller.products.add(쓸객체)

지우기 controller.products.delete(지울엘리먼트)

인덱스로 지우기 controller.products.deleteAt(지울엘리멘트의 인덱스)

 

수정

위젯에서 리스트의 인덱스 받기 

인덱스가 있으면 에디팅컨트롤러의 텍스트에 기존 내용을 넣기 

controller.products[index].속성 = 에디팅컨트롤러의 수정된 내용

 

Get.back

Get.to(() => MyHomePage(title: '전달값')

 

 

 

- 플러터는 레고의 블럭을 껴서 만드는 방식과 비슷하게 만들어 진다. 그 블럭을 위젯이라고 하는데 그런 위젯을 직접만들거나 남들이 제공하는 위젯을 끼워넣는 방식으로 개발이 이루어진다. 이와 같은 플러터의 구성 때문에 위젯간의 데이터 전달(커뮤니케이션)이 개발에서 상당히 중요하다.

 

- 개발시 stateful위젯과 stateless 위젯을 상속하여 자신의 위젯을 만드는데 stateless는 변화되는 상태값을 가지고 있지 않지만 stateful 위젯은 변화되는 상태값을 가지고 있다.

 

stateless 위젯은 직접 위젯을 build 하는 메서드를 가지고 있으며 값은 생성자를 통해 전달받으며 변하지 않는다. 

 

stateful 위젯은 생성자를 통해 값을 전달 받지만 state를 관리하기 위해 state위젯을 상속한 클래스를 불러서 그 클래스의 값을 state로 한다. 그리고 그 스테이트위젯을 상속한 클래스는 build메서드를 가지고 있다. 

 

즉,

class Bird extends StatefulWidget {
  const Bird({
    Key? key,
    this.color = const Color(0xFFFFE306),
    this.child,
  }) : super(key: key);
  
  // 생성자를 통해 얻어올 값 
  final Color color;
  final Widget? child;
 
  // 스테이트를 가질 수 있는 객체를 실행
  _BirdState createState() => _BirdState();
}



class _BirdState extends State<Bird> {

  // 스테이트, 변할수 있는 값들
  double _size = 1.0;

  void grow() {
    setState(() { _size += 0.1; });
  }

  @override
  Widget build(BuildContext context) {
    // 여기에 변수를 사용하면 주로 UI와 관련된 변수 사용
    
    return Container(
      color: widget.color,
      transform: Matrix4.diagonal3Values(_size, _size, 1.0),
      child: widget.child,
    );
  }
}

 

 

 

UI를 개발시 기능은 미구현된 형태로 먼저 개발하면 편함

댓글()