clue_ui_component

Description:

clue ui component

CLUe UI Component #
Introduction #
The CLUe UI Component was created to ensure the uniformity of Suprema's frontend outputs. It is designed to easily and conveniently implement basic elements that make up the UI, such as various buttons, dropdowns, pop-ups, and more. In addition to the component's style, various functionalities are implemented. For instance, with a customized Dropdown component, some of the items may need to be disabled, multiple items may be clickable, or the default selected item may need to be indicated separately.
Usage #
When GlobalKey is already used in the app #
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: You must register your key in the 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);
},
),
),
),
);
}
}

copied to clipboard
When GlobalKey is not used #
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);
},
),
),
),
);
}
}

copied to clipboard
Description #
When executed, the DropDown Component is present in the center, and when an item is clicked, the selected item is displayed as a Toast at the top.
Examples #


Visit the HomePage to see the full preview.