Components Toolbox
A basic Toolbox for Flutter components with AppDelegate to manage the light and dark theme.
Components
The toolbox class has the following components:
- Rounded Container: A container with rounded corners.
- Text Field: A text field with a label.
- Rounded Button: A button with a label (and an icon).
- Text Button: A button with a label.
- Markdown Text: A text that can parse markdown.
- Carousel: A carousel that can be embedded on any component.
- Custom Navigation Bar: A custom navigation bar with a title and a back button.
- Loader: A loader that can be embedded on any component.
- Theme Switcher: A switcher that can change the theme of the app.
- Floating Navigation Bar: A navigation bar that can float on the screen.
- AutoText: A text that can be resized automatically.
- Custom Colors: A class that can be used to set custom colors for the app.
- AutoScaleAnimatedColumn: A column that can be animated and resized automatically.
- SpacedColumn: A column that have a space between each child.
Getting Started
To use this class, you need to add the following dependency in your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
components_toolbox: ^6.0.5
Then, you need to import the class in your file:
import 'package:components_toolbox/components_toolbox.dart';
Usage
Rounded Container
RoundedContainer(
child: Text('Hello World!'),
),
Text Field
const CustomTextField("Simple"),
const SizedBox(height: 16),
const CustomTextField(
"Obscure",
obscureText: true,
),
Rounded Button
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RoundedButton(
text: 'Simple',
onPressed: () {},
width: MediaQuery.of(context).size.width / 2 - 32,
),
RoundedButton(
text: 'Shadow',
onPressed: () {},
shadow: CustomShadows.regularCentered,
width: MediaQuery.of(context).size.width / 2 - 32,
),
],
),
),
),
const SizedBox(height: 16),
RoundedButtonWithIcons(
Icons.save,
text: "With Icon",
onPressed: () {},
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: OutlinedRoundedButton(
"Outlined",
onPressed: () {},
width: 150,
),
),
CircleButton(
icon: Icons.add,
onPressed: () {},
),
AutoTextButton(
"TextButton",
onPressed: () {},
),
],
),
Dependencies
The project uses the following dependencies as specified in pubspec.yaml
:
shared_preferences
: Used to store the selected app theme (dark or light)
Libraries
- components/auto_scale_animated_column
- components/auto_text
- components/carousel
- components/loader
- components/markdown_text
- components/rounded_container
- components/spaced_column
- components/text_field
- components/theme_switcher
- components_toolbox
- This library provides various components for the toolbox.
- utils/app_delegate
- utils/colors
- utils/shadows