Flutter Setup Helper

A Dart package to streamline the creation of a standardized Flutter project structure. It sets up essential directories and files, helping developers start their projects with a solid foundation.

Features

Project Setup: Automatically creates a standardized folder structure for Flutter projects
Page Generator: Generate pages with GetX architecture components (Binding, Controller, Model, Screen)
Network Utilities: Ready-to-use network utilities for API calls with Dio
Theme Helper: Pre-configured theme system with consistent styling
UI Components: Helpful widgets like CustomButton, CustomText, CustomTextInput, and more
Loading Effects: Beautiful shimmer loading effects for your UI

Installation

Global Installation (Recommended)

dart pub global activate flutter_setup_helper

Project Installation

Add the following to your pubspec.yaml:

dependencies:
  flutter_setup_helper: ^1.1.4

Then run:

dart pub get

Usage

Project Setup

To set up a new project structure:

flutter_setup_helper --setup

This command creates the following structure:

lib/
  ├── app/
  │   ├── bindings/
  │   ├── data/
  │   │   ├── local/
  │   │   ├── models/
  │   │   ├── providers/
  │   │   ├── remote/
  │   │   └── repositories/
  │   ├── modules/
  │   ├── routes/
  │   ├── theme/
  │   ├── utils/
  │   └── widgets/
  │       └── common/
  └── main.dart
assets/
  ├── fonts/
  ├── icons/
  └── images/

Page Creation

To create a new page with GetX architecture:

flutter_setup_helper create-page --name LoginPage --b --c --m --s

Options:

--name or -n: Name of the page (required)
--b: Create binding
--c: Create controller
--m: Create model
--s: Create screen

If no component flags are specified, all components will be created.

Theme Helper

The package provides a semantic color system and theme helpers:

import 'package:flutter/material.dart';
import 'package:flutter_setup_helper/flutter_setup_helper.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: theme, // Global theme from ThemeHelper
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: appColors.primary, // Using semantic colors
          title: Text('My App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: appColors.surface,
                padding: EdgeInsets.all(16),
                child: Text(
                  'Primary Text',
                  style: TextStyle(color: appColors.black),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

UI Components

CustomButton

A flexible button component with various styles:

// Primary button
CustomButton(
  text: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
),

// Outlined button
CustomButton(
  text: 'Outlined Button',
  onPressed: () {},
  type: ButtonType.outlined,
),

// Text button
CustomButton(
  text: 'Text Button',
  onPressed: () {},
  type: ButtonType.text,
),

// With icon
CustomButton(
  text: 'Button with Icon',
  onPressed: () {},
  icon: Icons.add,
),

// Loading state
CustomButton(
  text: 'Loading Button',
  onPressed: () {},
  isLoading: true,
),

CustomText

Text with Google Fonts integration:

// Headline text
CustomText(
  text: 'This is a headline',
  style: TextStyle.headline,
  fontFamily: 'Montserrat',
),

// Body text
CustomText(
  text: 'This is body text',
  style: TextStyle.body,
),

// Caption text
CustomText(
  text: 'This is a caption',
  style: TextStyle.caption,
  color: appColors.grayDark,
),

CustomTextInput

A flexible text input component:

// Basic text input
CustomTextInput(
  controller: textController,
  labelText: 'Username',
  hintText: 'Enter your username',
),

// Password input
CustomTextInput(
  controller: passwordController,
  labelText: 'Password',
  obscureText: true,
  suffixIcon: Icons.visibility,
  onSuffixIconPressed: () {
    // Toggle password visibility
  },
),

// With validation
CustomTextInput(
  controller: emailController,
  labelText: 'Email',
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value == null || !value.contains('@')) {
      return 'Please enter a valid email';
    }
    return null;
  },
  autovalidateMode: AutovalidateMode.onUserInteraction,
),

CustomSnackBar

Easy-to-use snackbars with GetX:

// Success snackbar
CustomSnackBar.success(message: 'Operation completed successfully!');

// Error snackbar
CustomSnackBar.error(message: 'An error occurred!');

// Warning snackbar
CustomSnackBar.warning(message: 'Please check your input.');

// Info snackbar
CustomSnackBar.info(message: 'New updates available.');

// Custom snackbar
CustomSnackBar.show(
  title: 'Custom Snackbar',
  message: 'This is a custom snackbar with a button.',
  type: SnackBarType.info,
  buttonText: 'Action',
  onButtonPressed: () {
    // Handle button press
  },
  duration: Duration(seconds: 5),
);

CustomShimmer

Beautiful shimmer loading effects:

// Basic shimmer
CustomShimmer(
  child: Container(
    width: 200,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
    ),
  ),
),

// Predefined shimmer components
CustomShimmer.avatar(), // Circular avatar placeholder
CustomShimmer.text(), // Text line placeholder
CustomShimmer.card(), // Card placeholder
CustomShimmer.listItem(), // List item placeholder

// Shimmer list
CustomShimmer.list(
  itemCount: 5,
  itemHeight: 60,
  spacing: 12,
),

// Shimmer grid
CustomShimmer.grid(
  crossAxisCount: 2,
  itemCount: 6,
  spacing: 16,
),

Using CustomMaterialApp

For an even quicker setup, use the CustomMaterialApp widget:

import 'package:flutter/material.dart';
import 'package:flutter_setup_helper/flutter_setup_helper.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomMaterialApp(
      color: appColors.primary, // Status bar color
      type: Brightness.light, // Status bar icons brightness
      theme: theme, // Optional: Use the global theme
      title: 'My App', // Optional: App title
      home: HomePage(), // Your home page widget
    );
  }
}

Benefits of CustomMaterialApp:

Automatically configures status bar color and icon brightness
Removes the debug banner
Wraps content in SafeArea and Scaffold
Simplifies app initialization

Network Utilities

The package includes convenient network utilities for making API calls:

import 'package:flutter_setup_helper/flutter_setup_helper.dart';

void main() {
  // Initialize network utilities
  initNetworkUtils(
    baseUrl: 'https://api.example.com',
    debug: true,
  );
  
  // Make API calls
  dioGet('/users').then((response) {
    if (response != null) {
      print(response.data);
    }
  });
  
  dioPost(
    endUrl: '/login',
    data: {'email': 'user@example.com', 'password': '123456'},
    loginRouteName: '/login',
  ).then((response) {
    if (response != null) {
      print(response.data);
    }
  });
}

Quick Commands

# Activate the package globally
dart pub global activate flutter_setup_helper

# Set up project structure
flutter_setup_helper --setup

# Create a new page
flutter_setup_helper create-page --name MyPage --b --c --m --s

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

WebSpec - https://webspec.in

dependencies:
  flutter_setup_helper: 1.1.0

  /// fast commend
  dart pub global activate flutter_setup_helper

  /// second commend
  flutter_setup_helper --setup

  /// third commend
  flutter_setup_helper create-page --name MyPage --b --c --m --s