DevEssentials is a Flutter package to provide re-usable widDevs, navigations, extensions, helpers, to help Flutter developers for building apps from the scratch with less efforts.
Overall, DevEssentials will help Flutter Developers to reduce the development time.
Add this to your package's pubspec.yaml file:
dev_essentials: '^0.0.1'Install dev_essentials package by running this command from the command line or terminal:
$ flutter pub get
Alternatively, your editor might support flutter pub get.
Now in your Dart code, you can use:
import 'package:dev_essentials/dev_essentials.dart';If you want to use routes without context, DevEssentials can help you to do that, just see it:
Add "DevEssential" before your MaterialApp, turning it into DevEssentialMaterialApp
DevEssentialMaterialApp(
title: 'DevEssential Example',
home: MyHome(),
)To navigate to a new screen:
Dev.to(NextScreen());To close a screen, or anything you would normally close with Navigator.pop(context);
Dev.back();To go to the next screen and no option to go back to the previous screen.
Dev.off(NextScreen());To go to the next screen and cancel all previous routes.
Dev.offAll(NextScreen());To navigate to the next route, and receive or update data as soon as you return from it:
var data = await Dev.to(Payment());on other screen, send a data for previous route:
Dev.back(result: 'success');And use it:
ex:
if(data == 'success') madeAnything();Don't you want to use dev_essential's navigations extensions?
Just change the Navigator (uppercase) to navigator (lowercase), and you will have all the functions of the standard navigation, without having to use context
Example:
// Default Flutter navigator
Navigator.of(context).push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return HomePage();
},
),
);
// DevEssential's using Flutter syntax without needing context
navigator.push(
MaterialPageRoute(
builder: (_) {
return HomePage();
},
),
);
// DevEssential's syntax (It is much better, but you have the right to disagree)
Dev.to(HomePage());
- If you prefer to navigate by namedRoutes, DevEssential also supports this.
To define routes, use DevEssentialMaterialApp:
void main() {
runApp(
DevEssentialMaterialApp(
pages: [
DevEssentialPage(name: '/home', builder: (context) => HomePage()),
DevEssentialPage(name: '/second', builder: (context) => Second()),
],
)
);
}To navigate to nextScreen
Dev.toNamed("/NextScreen");To navigate and remove the previous screen from the tree.
Dev.offNamed("/NextScreen");To navigate and remove all previous screens from the tree.
Dev.offAllNamed("/NextScreen");
To handle navigation to non-defined routes (404 error), you can define an unknownRoute page in DevEssentialMaterialApp.
void main() {
runApp(
DevEssentialMaterialApp(
pages: [
DevEssentialPage(name: '/home', builder: (context) => HomePage()),
DevEssentialPage(name: '/second', builder: (context) => Second()),
],
unknownRoute: DevEssentialPage(
name: '/404NotFound',
builder: (context) => const Scaffold(
body: Center(
child: Text("Page not found."),
),
),
),
),
);
}Just send what you want for arguments.It accepts anything here, whether it is a String, a Map, a List, or even a class instance.
Dev.toNamed("/NextScreen", arguments: 'DevEssential is the best');DevEssentialMaterialApp also provides a predefined customizable splash screen.
Define the splash configuration to enable predefined splash view and restart the application
final SplashConfig splashConfig = SplashConfig(
logoPath: 'assets/images/logo.png',
backgroundColor: AppColors.primary,
foregroundColor: AppColors.white,
splashDuration: 3.seconds,
routeAfterSplash: Routes.dashboard,
)Now use it to pass splashConfig parameter inside the DevEssentialMaterialApp widget:
DevEssentialMaterialApp(
title: 'DevEssential Example',
splashConfig: splashConfig,
)if you want to perform some operation on the splash load just pass the onSplashInitCallback parameter inside the splash configuration and once your operation is completed make sure to call the loadSplash() callback from onSplashInitCallback to start loading the splash and navigate after the splash completed.
final SplashConfig splashConfig = SplashConfig(
logoPath: 'assets/images/logo.png',
backgroundColor: AppColors.primary,
foregroundColor: AppColors.white,
splashDuration: 3.seconds,
routeAfterSplash: Routes.dashboard,
onSplashInitCallback: (VoidCallback loadSplash) {
loadSplash();
},
)DevEssentialMaterialApp also provides a toast messages. To enable toast messages set the useToastNotification parameter to true.
DevEssentialMaterialApp(
title: 'DevEssential Example',
useToastNotification: true,
)Now to show a text toast message use
"My Toast message".showToast()DevEssentialMaterialApp uses bot_toast: ^4.0.4 so check all the supported bot toast features provided by bot_toast package. To use bot_toast's API just use DevEssentialToast insted of BotToast
DevEssentialToast.showCustomNotification(...)
DevEssentialToast.showCustomText(...)
DevEssentialToast.showCustomLoading(...)
DevEssentialToast.showAnimationWidget(...)
- SubmitButton
- ScrollableScaffoldWrapper
- LoadingIndictor
- TimelineListView
For using TimelineListView inside a CustomScrollView please use TimelineListView.sliver()
TimelineListView.builder(
padding: const EdgeInsets.only(bottom: 20),
itemCount: 3,
lineColor: AppColors.lightGreyTwo,
labelStyle: Dev.textTheme.labelMedium?.copyWith(
fontWeight: FontWeight.w500,
color: AppColors.mediumGrey,
),
lineWidth: 1.0,
legendText: DateTime.now().add(1.days).custom('dd MMM, yyyy'),
legendTextStyle: Dev.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w500,
),
legendColor: AppColors.duskyBlue10,
itemBuilder: (BuildContext context, int index) => TimelineListItem(
height: 75,
width: double.infinity,
label: DateTime.now().time12HourFormat().toLowerCase(),
child: (context, isFirst, isLast) => Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: const BorderSide(
width: 1,
color: AppColors.lightGrey,
),
),
margin: EdgeInsets.only(
top: isFirst ? 0.0 : 4.0,
bottom: isLast ? 0.0 : 4.0,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text.rich(
TextSpan(
children: [
const TextSpan(
text: 'User Name: ',
),
TextSpan(
text: 'Din Djarin ',
style: Dev.theme.textTheme.bodyMedium?.copyWith(
color: AppColors.black,
fontWeight: FontWeight.w600,
),
),
],
),
textScaler: TextScaler.linear(
Dev.deviceTextScaleFactor,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Dev.theme.textTheme.bodyMedium?.copyWith(
color: AppColors.mediumGrey,
),
),
Text.rich(
TextSpan(
children: [
const TextSpan(
text: 'Role: ',
),
TextSpan(
text: 'User',
style: Dev.theme.textTheme.bodyMedium?.copyWith(
color: AppColors.black,
fontWeight: FontWeight.w600,
),
),
],
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textScaler: TextScaler.linear(
Dev.deviceTextScaleFactor,
),
style: Dev.theme.textTheme.bodyMedium?.copyWith(
color: AppColors.mediumGrey,
),
),
Text.rich(
TextSpan(
children: [
const TextSpan(
text: 'Activity Type: ',
),
TextSpan(
text: 'File access(xyz.file)',
style: Dev.theme.textTheme.bodyMedium?.copyWith(
color: AppColors.black,
fontWeight: FontWeight.w600,
),
),
],
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textScaler: TextScaler.linear(
Dev.deviceTextScaleFactor,
),
style: Dev.theme.textTheme.bodyMedium?.copyWith(
color: AppColors.mediumGrey,
),
),
],
),
),
),
),
)- Splash
- DateTimeExtension for formatting date or time [DateTime.now().tod()] Check all the available methods
- TimeOfDayExtension Check all the available methods
- DeviceAndPackageInfoExtension Check all the available methods
- DurationExtension Check all the available methods
- FutureExtension Check all the available methods
- MediaQueryExtension for getting media queries [Dev.height, Dev.width] Check all the available methods
- NumberExtension Check all the available methods
- PathHelpersExtension Check all the available methods
- StringExtension Check all the available methods
- DevEssentialExtension Check all the available methods
- NavigationExtension Check all the available methods