RN이랑 비교할때마다 항상 등장하는 code push 였지만 반년 전쯤 구글 전 개발자들끼리 codepush기능을 개발하고 있단 얘기를 들었었고 어제 flutter 톡방에서 무료 버전도 나왔다는 소식을 들어 한번 해보려고 한다.

https://docs.shorebird.dev/

0.설치

Window

Set-ExecutionPolicy RemoteSigned -scope CurrentUser # Needed to execute remote scripts
iwr -UseBasicParsing 'https://raw.githubusercontent.com/shorebirdtech/install/main/install.ps1'|iex

Mac/Linux

curl --proto '=https' --tlsv1.2 https://raw.githubusercontent.com/shorebirdtech/install/main/install.sh -sSf | bash

설치 후 shorebired 입력시 아래처럼 나오면 성공.

shorebird doctor 커맨드로 문제가 될만한 사항 체크 후 flutter버전 업도 진행했다.

1.가입

shorebird account create

명령어를 적으면 구글 로그인 링크를 주는데 들어가서 원하는 계정 선택하고 이름까지 넣어주면 가입이 완료가 된다.

계정 생성을 하면 자동 로그인이 되어있기에 따로 로그인 명령어는 적지 않아도 된다.

shorebird login

2.프로젝트 적용

shorebird init

init이 성공했다면 이렇게 shorebird.yaml이 생성된걸 볼 수 있다.

2-1 퍼미션

당연하게도 shorebird 코드푸시는 인터넷 권한이 필요하다.
android/app/src/main/AndroidManifest.xml 의 경로에 퍼미션을 추가해준다.

<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>

3.실행

shorebird run

shorebird 서버를 경유해서 그런지 관련 로그들이 뜨면서 기존 flutter run 과 같이 실행이 된다.

4. 적용

그래서 이제 진짜로 적용을 해보자.
우선 간단한 화면 코드부터 작성을 해보았다. 테마와 텍스트, 컨테이너의 색을 바꿔볼 생각이다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // primarySwatch: Colors.red,
      ),
      home:  const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('shorebird code push blue'),
        // title: Text('shorebird code push red'),
      ),
      body: Center(
        child: Container( 
          color: Colors.blue, 
          // color: Colors.red,
          width: 200, 
          height: 200)
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {  },
      child: const Text("+"))
    );
  }
}

shorebird run 이후 주석을 풀어 색을 변경해주고
shorebird patch로 적용을 해준다.

저는 안되는데요...

patch가 된 내용을 다운로드를 하느라 바로 적용은 안된다고한다 에뮬레이터로 두번정도 재실행을 하니 변경이 완료되었다.

5. 심화

과연 어디까지 될까 실험을 하기로 했다.
lotti 라이브러리를 이용해서 float버튼을 클릭시 새로운 화면을 띄워보기로 했다.

floatingActionButton: FloatingActionButton(onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const SecondRoute()),
        );
      },

import 'package:lottie/lottie.dart';
import 'package:flutter/material.dart';

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Lottie.network(
        'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json');
  }
}

라이브러리에 새로운 파일 추가까지는 될줄 몰랐는데 된다니 너무 기분이 좋다.

6. 한계

만들어진지 오래되지도, 공식도 아니다 보니 아직 안되는 부분은 존재한다.
하지만 "네이티브를 건들정도면 네이티브를 하지 왜 플러터를 하냐"라는 말도 있는만큼 뷰적인 부분이 중점인 플러터에게는 매우 기쁜 소식이 아닐수 없다.