Flutter 무코드 도구,Magic Instrucctions 아키텍처 공개

TL;DR

저는 Napps Technologies의 대표 서본입니다.평소 매직인스트루시티https://magicinstructions.app/#/라는 플루터가 만든 무코드 도구를 개발하고 있다.오늘 어떤 아키텍처를 공개했는데 왜 코드를 안 써도 되는지.

프로그램 설계 선언

MagicInstrucctions에서 Fluter를 사용하여 응용 프로그램을 만들고 있습니다.Fluter의 특징을 한마디로 요약하면 모두 Widget이라는 위젯으로 구성되어 있으며, Widget을 프로그래밍 코드로 조합하여 프로그램을 만든다.
sample.dart

class SampleScreen extends StatelessWidget {

  Widget build() => Text('テスト')
}

이 예에서는 화면에 테스트 문자열이 표시됩니다.

다음 코드에서는 두 문자열이 나란히 표시됩니다.
sample.dart

class SampleScreen extends StatelessWidget {

  Widget build() => Row(children:[
    Text('テスト'),
    Text('テスト2'),
    
}

데이터에 따라 Widget 표시

이 코드를 다음과 같이 맵으로 바꿔서 문자열의 배열을Widget 코드로 바꾸는 것은 어떻습니까?
sample.dart

class SampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: ['テスト', 'テスト2'].map((e) => Text(e)).toList());
}

아까의 예와 같다.

선언적인 프로그램으로 설계된 Flutter는 데이터에 따라 동적 디스플레이를 재구성할 수 있다.우리 좀 더 발전합시다.다음 색상과 라벨 문자를 보존하기 위한 실체를 준비했습니다
entity.dart

class TextEntity {
  final String label;
  final Color color;

  TextEntity({required this.label, required this.color});
}

샘플 화면의 코드는 다음 실체 디스플레이 데이터를 사용하는 것으로 대체됩니다.
entity.dart

class SampleScreen extends StatelessWidget {
  final datas = [
    TextEntity(label: 'テスト', color: Colors.red),
    TextEntity(label: 'テスト2', color: Colors.blue),
  ];

  @override
  Widget build(BuildContext context) => Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: datas
          .map((e) => Text(e.label, style: TextStyle(color: e.color)))
          .toList());
}

그림에서 보듯이 왼쪽의 문자는 빨간색이고 오른쪽의 문자는 파란색이다.
데이터의 지시에 따라 화면의 표시를 변경할 수 있다.

솔리드에 따라 화면을 그리는 것은 Magic Instrucctions의 구조입니다.
솔리드의 항목을 늘려 문자의 크기와 위치를 변경할 수도 있습니다.

여러 가지 부품을 공통적으로 배치할 수 있다

글과 버튼이 나란히 있는 화면을 만드는 방법을 생각해 보도록 하겠습니다.

직접 코드를 쓰면 아래와 같다
sample.dart

class SampleScreen extends StatelessWidget {
  static Widget withDependencies() => ChangeNotifierProvider(
      create: (_) => SampleScreenState(), child: SampleScreen());

  @override
  Widget build(BuildContext context) =>
      Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text('テスト',
            style: TextStyle(color: context.watch<SampleScreenState>().color)),
        ElevatedButton(
          onPressed: () {},
          child: Text('テスト',
              style:
                  TextStyle(color: context.watch<SampleScreenState>().color)),
        ),
      ]);
}

나는 데이터로 이것을 바꾸려고 한다.Flutter에 피드백이 없기 때문에 String을 키로 하고 Widget의 Function을 값으로 되돌려 주는 Map을 만들고 Widget 실례를 만드는 클래스를 만듭니다.
widget_builder.dart

class WidgetBuilder {
  Map<String, Widget Function(Map map)> builders = {
    'Text': (Map map) {
      final entity = TextEntity.fromMap(map);
      return Text(entity.label, style: TextStyle(color: entity.color));
    },
    'Button': (Map map) {
      final entity = ButtonEntity.fromMap(map);
      return ElevatedButton(
        child: Text(entity.label),
        onPressed: () {},
      );
    }
  };

  Widget build(String key, Map map) {
    final builder = builders[key];
    if (builder == null) return Container();
    return builder(map);
  }
}

이 WidgetBuilder를 사용하여 그릴 수 있도록 화면 카테고리를 변경합니다.
sample.dart

class SampleScreen extends StatelessWidget {
  final datas = [
    WidgetEntity(
        key: 'Text', data: TextEntity(label: 'テスト', color: Colors.red).toMap()),
    WidgetEntity(key: 'Button', data: ButtonEntity(label: 'ボタン').toMap()),
  ];

  @override
  Widget build(BuildContext context) => Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children:
          datas.map((e) => WidgetBuilder().build(e.key, e.data)).toList());
}

실체 클래스는 다음과 같다.
entity.dart

class WidgetEntity {
  final String key;
  final Map data;

  WidgetEntity({required this.key, required this.data});
}

실제 디스플레이는 다음과 같다. 데이터 변경을 통해 화면의 디스플레이 내용을 변경할 수 있다.

다음 그림과 같이 데이터 변경
sample.dart

class SampleScreen extends StatelessWidget {
  final datas = [
    WidgetEntity(
        key: 'Text', data: TextEntity(label: 'テスト', color: Colors.red).toMap()),
    WidgetEntity(key: 'Button', data: ButtonEntity(label: 'ボタン').toMap()),
    WidgetEntity(
        key: 'Text', data: TextEntity(label: 'テスト', color: Colors.red).toMap()),
  ];

  @override
  Widget build(BuildContext context) => Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children:
          datas.map((e) => WidgetBuilder().build(e.key, e.data)).toList());
}

실제 Magic Instrucctions에서는 솔리드의 내용이 Firestore에 지속되고 실행 시 솔리드의 내용을 바탕으로 표시되어 화면이 그려집니다.또한 Figma API에서 가져온 JSON에 따라 솔리드 컨텐트를 만들면 다음과 같은 복잡한 UI가 자동으로 만들어집니다.

논리적 실행 방법

다음은 버튼을 눌렀을 때의 논리에 대해 설명한다.버튼을 누르면 텍스트 색이 빨간색으로 변하는 프로그램을 시도해 보고 싶습니다.

보존할 색상의 카테고리 만들기
state.dart

class SampleScreenState with ChangeNotifier {
  Color color = Colors.black;

  void setColor(Color color) {
    this.color = color;
    notifyListeners();
  }
}

샘플 화면의 코드는 다음과 같다. 색을 유지하는 반에서 문자의 색을 얻고 단추를 눌렀을 때 색을 유지한다SampleScreenStatesample.dart

class SampleScreen extends StatelessWidget {
  static Widget withDependencies() => ChangeNotifierProvider(
      create: (_) => SampleScreenState(), child: SampleScreen());

  @override
  Widget build(BuildContext context) =>
      Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text('テスト',
            style: TextStyle(color: context.watch<SampleScreenState>().color)),
        ElevatedButton(
          child: Text('テスト'),
          onPressed: () {
            context.read<SampleScreenState>().setColor(Colors.red);
          },
        )
      ]);
}

이렇게 데이터를 기반으로 그리면 논리적으로 데이터를 수정하여 UI에 논리적인 결과를 반영할 수 있습니다.내가 쓰고 싶은 것은 반사를 통해 논리를 집행하면 다양한 논리를 실현할 수 있지만 Flutter는 반사할 수 없다는 것이다.MagicInstrucctions는 String을 키로 하고 Function()을 값으로 하는 Map을 구축하여 논리가 동적으로 실행되도록 합니다.
logic_executor.dart

class LogicExecutor {
  final executors = <String, Function(BuildContext)>{
    'changeColor': (context) =>
        context.read<SampleScreenState>().setColor(Colors.red)
  };

  void execute(BuildContext context, String key) {
    final executor = executors[key];
    if (executor == null) return;
    executor(context);
  }
}

MagicInstrucctions는 다음과 같은 일반적인 논리를 준비했다. 여러 동작을 수행할 수 있고 다양한 용례에 대응할 수 있다.

총결산

매직Instrucctions는 Flutter의 선언적 프로그램을 이용해 코드 없는 도구를 설계 제작하고 있으며, NappsTechnologies는 매직Instrucctions 개발에 관심 있는 엔지니어를 모집하고 있다.