clue_ui_component 1.0.3

Clue Ui Component

CLUe UI Component

Introduction

CLUe UI Componenet 는 슈프리마의 프론트엔드 결과물의 통일성을 위하여 작성되었다. 여러 버튼, 드랍다운, 팝업 등등 UI를 구성하는 기본 요소를 쉽고, 간편하게 구현하기 위해서 작업되었다. Component의 스타일 뿐만 아니라, 여러 가지 기능들을 구현하기도 하였다. 간단한 예시로, 커스터마이징된 Dropdown compoenet를 예시로 들면, 구성하는 항목중 일부는 비활성화를 하고 싶거나, 드랍다운 항목중 여러개의 항목을 클릭할수 있도록 하거나, 기본적으로 선택된 항목을 별도로 표시하고자 하는 요구사항이 그 예시이다.

Usage

이미 GlobalKey를 앱에서 사용하는 경우

import 'package:flutter/material.dart';

// import clue component module
import 'package:clue_ui_component/clue_ui_component.dart';

final GlobalKey<NavigatorState> myappKey = GlobalKey<NavigatorState>(debugLabel: 'in-your-app-key');

void main() {
  // CAUTION : 당신의 키를 clue module에 등록해야 합니다. 
  setClueGlobalKey(myappKey);

  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: myappKey,
      home: Scaffold(
        body: Center(
          child: ClueDropDownButton(
            itemMap: const {"Key1": "value1", "Key2": "value2"},
            onChanged: (String key) {
              ClueOverlay.showSuccessToast(key);
            },
          ),
        ),
      ),
    );
  }
}

GlobalKey를 사용하지 않는 경우

import 'package:flutter/material.dart';

// import clue component module
import 'package:clue_ui_component/clue_ui_component.dart';

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

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: clueNavigatorKey, // << Add this line
      home: Scaffold(
        body: Center(
          child: ClueDropDownButton(
            itemMap: const {"Key1": "value1", "Key2": "value2"},
            onChanged: (String key) {
              ClueOverlay.showSuccessToast(key);
            },
          ),
        ),
      ),
    );
  }
}

[Alt sample1] [Alt sample1]

설명

실행시 가운대에 DropDown Component가 존재하며, 아이템을 클릭시, 선택한 아이템이 Toast로 최상위에 표현 됩니다.

Examples

HomePage를 방문하여 전체 Preview를 확인하세요