Skip to main content

Widgets

introduction​

Import the package In your pubspec.yaml add this to the dependency level

calmcore:
  git:
    url: https://github.com/CalmExperts/CalmCore
    path: widgets/

then import the package

import 'package:calmcore/calm_core.dart';

Rules​

note

please apply both light and dark theme in MaterialApp like this

MaterialApp(
     debugShowCheckedModeBanner: false,
     darkTheme: AppStyle.darkTheme,
     theme: AppStyle.lightTheme,
  );

Shell​

class Example extends StatelessWidget {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    return CalmShell(
      index: index,
      fullScreen: false,
      currentPage: Container(),
      isExpanded: false,
      items: [
        NavItem(icon: Icons.home, label: 'Home'),
        NavItem(icon: Icons.dashboard, label: 'Dashboard'),
      ],
      onIndexChanged: (value) {
        setState({
            index = value;
        });
      },
    );
  }
}

custom Tabs​

class Example extends StatelessWidget {
  String current = 'Hello';
  @override
  Widget build(BuildContext context) {
    return CustomTabs(
      currentTab: '',
      tabs: ['Hello', 'nihao', 'Test'],
      onTap: (value) {
        current = value;
      },
    );
  }
}

Appstyle​

Calm core already have dark/light theme you can just import it

AppStyle.darkTheme;
AppStyle.lightTheme;
AppStyle.primaryColor;
AppStyle.secondaryColor;

Platform widgets​

adaptive widgets for every platform with minimum syntax

showToast​

toast messages for any platform

ex:

showToast("Hello World!");

More options:

 showToast("Hello World!",
 backgroundColor: Colors.red,
 fontSize: 20,
 textColor: Colors.white
);

Context extension​

This help you access many things with simple code like this Make sure we import calm core first

import 'package:calmcore/calm_core.dart';
context.width // access screen width
context.height
context.isDark // check if is dark mode
context.isMobile //check if is mobile
context.isTablet //

Navigation with context

context.navTo("/your_path"); // nav to any route
context.navClose(); //close page
context.navReplace("/your_path"); // replace the page

Remove “#” from urls (web)​

in main.dart copy this line

setUrlStrategy(PathUrlStrategy());