nextwidget 1.0.0

A package for creating reusable components and managing themes in Flutter.

NextWidget CLI Documentation

Introduction

The NextWidget CLI allows developers to generate reusable components and manage themes in their Flutter projects. This documentation explains how to use the CLI to create components and themes, and how to customize these themes.

Installation

To install the NextWidget CLI, add the package to your Flutter project:

dependencies:
  nextwidget: ^1.0.0

  Then, run the following command to activate the CLI:
bash
dart pub get

 Usage of the CLI
Command create
The create command allows developers to create reusable components in the lib/components/ folder of their project.

Usage of the CLI
Command create
The create command allows developers to create reusable components in the lib/components/ folder of their project.

Using the CLI
Create Command
The create command allows you to create reusable components in the lib/components/ directory of your project. Use the --type option to specify the type of component to create.

Example Usage
To create a reusable button, navigate to your Flutter project directory and run:

bash
Copier le code
dart pub run nextwidget:nextwidget create --type button
This command will create a new file button.dart in the lib/components/ directory of your project.

Theme Command
The theme command allows you to add or customize theme components. Use the --add option to add theme components, and the --customize option to customize existing components.

Add All Theme Components
To add all theme components to your project:

bash
Copier le code
dart pub run nextwidget:nextwidget theme --add all
Add a Specific Theme Component
To add a specific theme component:

bash
Copier le code
dart pub run nextwidget:nextwidget theme --add custom_theme
Customize Existing Theme Components
To customize existing theme components:

bash
Copier le code
dart pub run nextwidget:nextwidget theme --customize
File Structure
When you add components or themes, the files are organized as follows:

css
Copier le code
lib/
├── components/
│   └── button.dart
├── theme/
│   ├── custom_theme.dart
│   ├── widgets/
│   │   ├── theme_customizer.dart
│   │   └── themed_app.dart
List of Available Widgets
Basic and Container Widgets
Button: button_template.dart - An interactive element that allows the user to trigger an action.
Card: card_template.dart - An elevated container, generally used to present information.
Container: custom_container_template.dart - A flexible container that allows customization of its children’s style and layout.
Image: image_widget_template.dart - Displays an image from a file or network.
List and Grid Widgets
GridView: modern_gridview_template.dart - Displays children in a grid.
ListView: modern_listview_template.dart - Displays children in a scrollable list.
Dialog and Alert Widgets
AlertDialog: modern_alertdialog_template.dart - A dialog that interrupts the user with important information or a question.
SimpleDialog: modern_simpledialog_template.dart - A dialog that presents a set of options to the user.
Selection Widgets
Checkbox: modern_checkbox_template.dart - An element that allows the user to select one or more options.
Radio: modern_radio_template.dart - An element that allows the user to select a single option from multiple choices.
TextFormField: modern_textformfield_template.dart - A text field that allows the user to input text.
Navigation and Structural Widgets
AppBar: ReusableAppBar.dart - An application bar, usually located at the top of the screen.
BottomNavigationBar: ReusableBottomNavigationBar.dart - A navigation bar located at the bottom of the screen.
Drawer: ReusableDrawer.dart - A sliding panel that reveals navigation options.
TabBar: ReusableTabBar.dart - A component that allows switching between different views.
ExpansionPanel: ReusableExpansionPanel.dart - A panel that can be expanded to reveal additional content.
FloatingActionButton: ReusableFloatingActionButton.dart - A floating button, usually used for a primary action.
SnackBar: ReusableSnackBar.dart - A short message that typically appears at the bottom of the screen to provide feedback to the user.
Other Widgets
Color: color_class_template.dart - Likely a file defining custom colors for the application.
Slider: reusableSlider.dart - An element that allows the user to select a numerical value within a given range.
Example Usage
Custom Theme
Here is an example code to use a custom theme in your Flutter application.

File: lib/theme/custom_theme.dart
dart
Copier le code
import 'package:flutter/material.dart';

class CustomTheme {
  final Color background;
  final Color foreground;
  final Color card;
  final Color cardForeground;
  final Color primary;
  final Color primaryForeground;
  final Color secondary;
  final Color secondaryForeground;
  final Color accent;
  final Color accentForeground;
  final Color border;
  final Color input;
  final Color ring;
  final double radius;

  CustomTheme({
    required this.background,
    required this.foreground,
    required this.card,
    required this.cardForeground,
    required this.primary,
    required this.primaryForeground,
    required this.secondary,
    required this.secondaryForeground,
    required this.accent,
    required this.accentForeground,
    required this.border,
    required this.input,
    required this.ring,
    required this.radius,
  });

  CustomTheme copyWith({
    Color? background,
    Color? foreground,
    Color? card,
    Color? cardForeground,
    Color? primary,
    Color? primaryForeground,
    Color? secondary,
    Color? secondaryForeground,
    Color? accent,
    Color? accentForeground,
    Color? border,
    Color? input,
    Color? ring,
    double? radius,
  }) {
    return CustomTheme(
      background: background ?? this.background,
      foreground: foreground ?? this.foreground,
      card: card ?? this.card,
      cardForeground: cardForeground ?? this.cardForeground,
      primary: primary ?? this.primary,
      primaryForeground: primaryForeground ?? this.primaryForeground,
      secondary: secondary ?? this.secondary,
      secondaryForeground: secondaryForeground ?? this.secondaryForeground,
      accent: accent ?? this.accent,
      accentForeground: accentForeground ?? this.accentForeground,
      border: border ?? this.border,
      input: input ?? this.input,
      ring: ring ?? this.ring,
      radius: radius ?? this.radius,
    );
  }
}
File: lib/theme/widgets/theme_customizer.dart
dart
Copier le code
import 'package:flutter/material.dart';
import 'package:your_package_name/src/theme/custom_theme.dart';
import 'package:your_package_name/src/theme/widgets/color_picker_dialog.dart';

class ThemeCustomizer extends StatefulWidget {
  final CustomTheme initialTheme;
  final ValueChanged<CustomTheme> onThemeChanged;

  const ThemeCustomizer({
    Key? key,
    required this.initialTheme,
    required this.onThemeChanged,
  }) : super(key: key);

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

class _ThemeCustomizerState extends State<ThemeCustomizer> {
  late CustomTheme _currentTheme;

  @override
  void initState() {
    super.initState();
    _currentTheme = widget.initialTheme;
  }

  void _updateTheme(CustomTheme newTheme) {
    setState(() {
      _currentTheme = newTheme;
    });
    widget.onThemeChanged(newTheme);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _buildColorPicker('Background', _currentTheme.background, (color) {
          _updateTheme(_currentTheme.copyWith(background: color));
        }),
        _buildColorPicker('Foreground', _currentTheme.foreground, (color) {
          _updateTheme(_currentTheme.copyWith(foreground: color));
        }),
        // Add more color pickers for other theme variables
      ],
    );
  }

  Widget _buildColorPicker(String label, Color currentColor, ValueChanged<Color> onColorChanged) {
    return Row(
      children: [
        Text(label),
        Spacer(),
        GestureDetector(
          onTap: () async {
            Color? pickedColor = await showDialog(
              context: context,
              builder: (context) => ColorPickerDialog(currentColor: currentColor),
            );
            if (pickedColor != null) {
              onColorChanged(pickedColor);
            }
          },
          child: Container(
            width: 24,
            height: 24,
            color: currentColor,
          ),
        ),
      ],
    );
  }
}
File: lib/theme/widgets/themed_app.dart
dart
Copier le code
import 'package:flutter/material.dart';
import 'package:your_package_name/src/theme/custom_theme.dart';

class ThemedApp extends StatelessWidget {
  final CustomTheme theme;
  final Widget child;

  const ThemedApp({
    Key? key,
    required this.theme,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        primaryColor: theme.primary,
        accentColor: theme.accent,
        backgroundColor: theme.background,
        cardColor: theme.card,
        textTheme: TextTheme(
          bodyText1: TextStyle(color: theme.foreground),
          bodyText2: TextStyle(color: theme.foreground),
        ),
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(theme.radius),
          ),
        ),
      ),
      child: child,
    );
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CustomTheme _currentTheme = CustomTheme(
    background: Colors.white,
    foreground: Colors.black,
    card: Colors.grey[200]!,
    cardForeground: Colors.black,
    primary: Colors.blue,
    primaryForeground: Colors.white,
    secondary: Colors.green,
    secondaryForeground: Colors.white,
    accent: Colors.pink,
    accentForeground: Colors.white,
    border: Colors.grey,
    input: Colors.grey[300]!,
    ring: Colors.blueAccent,
    radius: 8.0,
  );

  @override
  Widget build(BuildContext context) {
    return ThemedApp(
      theme: _currentTheme,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Custom Theme Example'),
          ),
          body: Column(
            children: [
              ThemeCustomizer(
                initialTheme: _currentTheme,
                onThemeChanged: (newTheme) {
                  setState(() {
                    _currentTheme = newTheme;
                  });
                },
              ),
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('This is a card with custom theme.'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Conclusion
This documentation provides a comprehensive guide on using the NextWidget CLI to create components and manage themes in your Flutter projects. Make sure to follow the instructions to properly install and use the CLI.