lit_ui_kit 1.0.4 copy "lit_ui_kit: ^1.0.4" to clipboard
lit_ui_kit: ^1.0.4 copied to clipboard

outdated

Contains a collection of code implementing the Lit UI design language. It provides several widgets and screens in addition to custom model classes and controller classes for easier use.

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lit_ui_kit/lit_ui_kit.dart';

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

class LitUIKitExample extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _LitUIKitExampleState createState() => _LitUIKitExampleState();
}

class _LitUIKitExampleState extends State<LitUIKitExample> {
  @override
  void initState() {
    super.initState();
    ImageCacheController(
        assetImages: ["assets/images/launcher_placeholder.png"],
        context: context);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LitUIKit',
      home: ExampleHomeScreen(),
    );
  }
}

const String exampleText = "Lorem ipsum dolor sit amet, consetetur sadipscing" +
    " elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore" +
    " magna aliquyam erat, sed diam voluptua. At vero eos et accusam et " +
    "justo duo dolores et ea rebum. Stet clita kasd gubergren";

const String LITUIKIT_DESCR =
    "LitUIKit enables you to create unique user interfaces in less time. " +
        "Built with the framework. Whose Widgets include custom " +
        "implementation of Snackbars, AppBars and Utility Screens " +
        "(e.g. to verify the user's age and to show the application's" +
        " licenses).";

class ExampleHomeScreen extends StatefulWidget {
  ExampleHomeScreen({Key? key}) : super(key: key);

  @override
  _ExampleHomeScreenState createState() => _ExampleHomeScreenState();
}

class _ExampleHomeScreenState extends State<ExampleHomeScreen> {
  late LitSettingsPanelController settingsPanelController;
  late LitSnackbarController _solidSnackbarController;
  late LitSnackbarController _transparentSnackbarController;
  late LitNotificationController _notificationController;
  late bool darkMode;
  DateTime? dayOfBirth;

  void showSolidSnackbar() {
    _solidSnackbarController.showSnackBar();
  }

  void showTransparentSnackbar() {
    _transparentSnackbarController.showSnackBar();
  }

  Color get buttonTextColor {
    return darkMode ? Colors.white : LitColors.mediumGrey;
  }

  Color get buttonColor {
    return darkMode ? LitColors.mediumGrey : Colors.white;
  }

  void _addNotification() {
    setState(() {
      _notificationController.add(
        LitNotificationData(
          description: "${DateTime.now().toIso8601String()}",
          icon: LitIcons.bolt,
        ),
      );
    });
  }

  @override
  void initState() {
    super.initState();
    settingsPanelController = LitSettingsPanelController();
    _solidSnackbarController = LitSnackbarController();
    _transparentSnackbarController = LitSnackbarController();
    _notificationController = LitNotificationController();
    darkMode = false;
    dayOfBirth = null;
  }

  @override
  Widget build(BuildContext context) {
    return LitNotificationContainer(
      controller: _notificationController,
      child: LitScaffold(
        backgroundColor: darkMode ? LitColors.darkBlue : Colors.white,
        appBar: LitAppBar(
          title: "LitUIKit Example",
          backgroundColor: darkMode ? Colors.black : Colors.white,
          textStyle: LitTextStyles.sansSerif.copyWith(
            color: darkMode ? Colors.white : LitColors.mediumGrey,
          ),
          elevated: darkMode,
        ),
        snackbars: [
          LitIconSnackbar(
            snackBarController: _solidSnackbarController,
            text: "Snackbar!",
            iconData: LitIcons.info,
          ),
          LitTransparentIconSnackbar(
            snackBarController: _transparentSnackbarController,
            text: "Transparent Snackbar!",
            iconData: LitIcons.info,
          ),
        ],
        settingsPanel: LitSettingsPanel(
          controller: settingsPanelController,
          title: "Settings",
          darkMode: darkMode,
          settingsTiles: [
            LitSettingsPanelTile(
              onValueToggled: (toggledValue) {
                setState(() {
                  darkMode = toggledValue;
                });
              },
              darkMode: darkMode,
              enabled: darkMode,
              optionName: "Dark mode",
              iconData: LitIcons.moon_with_stars_solid,
            ),
            LitSettingsPanelTile(
              onValueToggled: (toggledValue) {
                setState(() {
                  darkMode = toggledValue;
                });
              },
              darkMode: darkMode,
              enabled: darkMode,
              optionName: "Dark mode",
              iconData: LitIcons.moon_with_stars_solid,
            ),
            LitSettingsPanelTile(
              onValueToggled: (toggledValue) {
                setState(() {
                  darkMode = toggledValue;
                });
              },
              darkMode: darkMode,
              enabled: darkMode,
              optionName: "Dark mode",
              iconData: LitIcons.moon_with_stars_solid,
            ),
            LitSettingsPanelTile(
              onValueToggled: (toggledValue) {
                setState(() {
                  darkMode = toggledValue;
                });
              },
              darkMode: darkMode,
              enabled: darkMode,
              optionName: "Dark mode",
              iconData: LitIcons.moon_with_stars_solid,
            ),
            LitSettingsPanelTile(
              onValueToggled: (toggledValue) {
                setState(() {
                  darkMode = toggledValue;
                });
              },
              darkMode: darkMode,
              enabled: darkMode,
              optionName: "Dark mode",
              iconData: LitIcons.moon_with_stars_solid,
            ),
            LitSettingsPanelTile(
              onValueToggled: (toggledValue) {
                setState(() {
                  darkMode = toggledValue;
                });
              },
              darkMode: darkMode,
              enabled: darkMode,
              optionName: "Dark mode",
              iconData: LitIcons.moon_with_stars_solid,
            ),
            LitSettingsPanelTile(
              onValueToggled: (toggledValue) {
                setState(() {
                  darkMode = toggledValue;
                });
              },
              darkMode: darkMode,
              enabled: darkMode,
              optionName: "Dark mode",
              iconData: LitIcons.moon_with_stars_solid,
            ),
          ],
        ),
        actionButton: AnimatedActionButton(
            child: Icon(
              LitIcons.gear,
              color: Colors.white,
              size: 18.0,
            ),
            backgroundColor: LitColors.mediumGrey,
            onPressed: () => {
                  settingsPanelController.showSettingsPanel(),
                }),
        body: Container(
          width: MediaQuery.of(context).size.width,
          child: LitScrollbar(
            child: ScrollableColumn(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  children: [
                    dayOfBirth != null
                        ? Padding(
                            padding: const EdgeInsets.only(top: 32.0),
                            child: ClippedText(
                              "You were born in ${dayOfBirth!.year}",
                              style: LitTextStyles.sansSerif.copyWith(
                                color: buttonTextColor,
                              ),
                            ),
                          )
                        : SizedBox(),
                    _ButtonList(
                      addNotification: _addNotification,
                      buttonColor: buttonColor,
                      buttonTextColor: buttonTextColor,
                      showSolidSnackbar: showSolidSnackbar,
                      showTransparentSnackbar: showTransparentSnackbar,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _ButtonList extends StatelessWidget {
  final Color buttonColor;
  final Color buttonTextColor;
  final void Function() addNotification;
  final void Function() showSolidSnackbar;
  final void Function() showTransparentSnackbar;
  const _ButtonList({
    Key? key,
    required this.buttonColor,
    required this.buttonTextColor,
    required this.addNotification,
    required this.showSolidSnackbar,
    required this.showTransparentSnackbar,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Add notification",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: addNotification,
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
              color: buttonColor,
              child: ClippedText(
                "Show Licenses",
                upperCase: true,
                style: LitSansSerifStyles.button.copyWith(
                  color: buttonTextColor,
                ),
              ),
              onPressed: () => {
                    Navigator.push(context,
                        CupertinoPageRoute(builder: (context) {
                      return ApplicationLicensesScreen();
                    }))
                  }),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
              color: buttonColor,
              child: ClippedText(
                "Show Solid SnackBar!",
                upperCase: true,
                style: LitSansSerifStyles.button.copyWith(
                  color: buttonTextColor,
                ),
              ),
              onPressed: showSolidSnackbar),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
              color: buttonColor,
              child: ClippedText(
                "Show Transparent SnackBar!",
                upperCase: true,
                style: LitSansSerifStyles.button.copyWith(
                  color: buttonTextColor,
                ),
              ),
              onPressed: showTransparentSnackbar),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Confirm Age Screen",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              LitRouteController(context).pushCupertinoWidget(
                ConfirmAgeScreen(
                  onSubmit: () {
                    LitRouteController(context).pop();
                  },
                ),
              ),
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Onboarding Screen",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              LitRouteController(context)
                  .pushCupertinoWidget(_LitOnboardingScreenImplementation())
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show AboutApp dialog",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              showDialog(
                context: context,
                builder: (context) {
                  return AboutAppDialog(
                    title: "About",
                    appName: "LitUIKit Example",
                    art: _Art(large: false),
                    infoDescription: LITUIKIT_DESCR,
                  );
                },
              )
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Discard Draft Dialog",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              showDialog(
                  context: context,
                  builder: (context) {
                    return DiscardDraftDialog(
                      onDiscard: () {
                        LitRouteController(context).closeDialog();
                      },
                    );
                  })
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Privacy Policy Screen",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              LitRouteController(context)
                  .pushCupertinoWidget(_LitPrivacyScreenImplementation())
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Offline App Disclaimer Screen",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              Navigator.push(
                context,
                CupertinoPageRoute(
                  builder: (context) {
                    return LitOfflineAppDisclaimerScreen(
                      onConfirm: () => {
                        Navigator.pop(context),
                      },
                    );
                  },
                ),
              )
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Startup Screen",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              Navigator.push(
                context,
                CupertinoPageRoute(
                  builder: (context) {
                    return LitStartupScreen();
                  },
                ),
              )
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Signup Screen",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              LitRouteController(context)
                  .pushCupertinoWidget(_LitSignupScreenImplementation())
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.0),
          child: LitRoundedElevatedButton(
            color: buttonColor,
            child: ClippedText(
              "Show Credits Screen",
              upperCase: true,
              style: LitSansSerifStyles.button.copyWith(
                color: buttonTextColor,
              ),
            ),
            onPressed: () => {
              LitRouteController(context)
                  .pushCupertinoWidget(_LitCreditsScreenImplementation())
            },
          ),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return LitOnboardingScreen(
      art: _Art(large: false),
      title: "Onboading",
      textItems: const [
        OnboardingText(
          subtitle: "Subtitle",
          title: "Title",
          text: exampleText,
        ),
        OnboardingText(
          subtitle: "Subtitle",
          title: "Title",
          text: "Second Text Item",
        ),
      ],
      onExit: () => LitRouteController(context).navigateBack(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return LitPrivacyPolicyScreen(
      privacyTags: [
        PrivacyTag(isConform: true, text: "Private"),
        PrivacyTag(
          text: "Offline",
          isConform: true,
        ),
      ],
      art: _Art(large: false),
      privacyText: LITUIKIT_DESCR,
      onAgreeCallback: () {
        Navigator.pop(context);
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return LitSignUpScreen(
      onSubmit: () {
        LitRouteController(context).pop();
      },
      inputFields: [
        LitTextField(
          label: "Username",
          icon: LitIcons.person_solid,
          onChange: (value) {
            print("Hello, $value");
          },
        ),
        LitTextField(
          label: "Username",
          icon: LitIcons.person_solid,
          onChange: (value) {
            print("Hello, $value");
          },
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return LitCreditsScreen(
      appTitle: "LitUIKit",
      art: _Art(large: false),
      credits: [
        CreditData(
          role: "Made by",
          names: [
            "LitLifeSoftware",
          ],
        ),
        CreditData(
          role: "Design",
          names: [
            "Michael Grigorenko",
          ],
        ),
        CreditData(
          role: "Development",
          names: [
            "Michael Grigorenko",
          ],
        ),
        CreditData(
          role: "Flutter Framework",
          names: [
            "Google LLC.",
            "Flutter Contributors",
            "Skia Contributors",
            "Dart Contributors",
          ],
        ),
      ],
    );
  }
}

class _Art extends StatelessWidget {
  final bool large;
  const _Art({
    Key? key,
    required this.large,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: SizedBox(
          width: large ? 200.0 : 100.0,
          height: large ? 200.0 : 100.0,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(
                const Radius.circular(25.0),
              ),
              color: const Color(0xFFC4C4C4),
            ),
            child: Center(
              child: Text(
                "Provide art",
                textAlign: TextAlign.center,
                style: LitTextStyles.sansSerifBodyTighterSmaller,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
7
likes
0
pub points
34%
popularity

Publisher

unverified uploader

Contains a collection of code implementing the Lit UI design language. It provides several widgets and screens in addition to custom model classes and controller classes for easier use.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter, intl, package_info, url_launcher

More

Packages that depend on lit_ui_kit