Base URL Switcher #

The simplest way to switch Base URLs in Flutter 🚀

⚡ Ultra Simple - Just 3 Steps! #

1️⃣ Add the Package #

dependencies:
  base_url_switcher: ^2.2.0

2️⃣ Add URLs in main.dart #

import 'package:base_url_switcher/base_url_switcher.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Just add URLs - everything else is automatic!
  await EnvService.initialize(
    developmentUrl: 'https://dev-api.mycompany.com',
    productionUrl: 'https://api.mycompany.com',
    defaultEnvironment: EnvironmentType.development,
  );
  
  runApp(MyApp());
}

3️⃣ Wrap the Widget You Want to Tap #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('My App')),
        body: SimpleBaseUrlWrapper(
          // Wrap the widget that users will tap on to access settings
          child: YourWidget(),
        ),
      ),
    );
  }
}

💡 Important: The SimpleBaseUrlWrapper should wrap the widget that users will tap on to access the environment settings. This could be:

• The entire body of your app
• A specific button or logo
• Any interactive widget where you want the hidden access

🎯 How It Works? #

1. Tap 7 times on the wrapped widget (the one inside SimpleBaseUrlWrapper)
2. Enter password (default: "admin")
3. Switch environment and use the new Base URL

📍 Where to tap: Users tap on the widget that's wrapped with SimpleBaseUrlWrapper. This could be your app's body, a logo, or any specific area you choose.

💻 Using Base URL in Code #

// Anywhere in your app
final url = BaseUrlManager.instance.currentBaseUrl;
final response = await http.get(Uri.parse('$url/api/users'));

🎨 Customize Access #

// Example 1: Wrap entire app body
SimpleBaseUrlWrapper(
  password: "myapp123", // Custom password
  tapCount: 5, // 5 taps instead of 7
  child: YourWidget(),
)

// Example 2: Wrap only a specific logo/button
SimpleBaseUrlWrapper(
  child: Image.asset('assets/logo.png'), // Users tap on logo
)

// Example 3: Wrap a specific area
SimpleBaseUrlWrapper(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(child: Text('Tap here')),
  ),
)

⚙️ Custom Configurations #

Add your own configuration items with automatic toggle state management! The toggle button manages its own state automatically - no need for external state management.

✨ Key Features: #

• Auto Toggle: The switch button changes automatically when tapped
• Initial Value: Set the initial state via enabled parameter
• State Callback: Receive the new state in onTap callback
• No External State: No need for setState or state variables

SimpleBaseUrlWrapper(
  configurations: [
    ConfigurationItem(
      title: 'Network Inspector',
      description: 'Enable network inspection',
      enabled: ChuckerFlutter.showOnRelease, // Initial value from outside
      onTap: (newState) {
        // Your logic here - toggle happens automatically!
        // newState is the new enabled state after toggle
        ChuckerFlutter.isDebugMode = newState;
        ChuckerFlutter.showOnRelease = newState;
      },
    ),
    
    // Another configuration - simple action
    ConfigurationItem(
      title: 'Clear Cache',
      description: 'Clear all cached data',
      enabled: true,
      onTap: (newState) {
        // Your clear cache logic here
        // newState is true after toggle
      },
    ),
  ],
  child: YourWidget(),
)

📝 How It Works: #

1. Initial State: The toggle button shows the value from enabled parameter
2. Auto Toggle: When you tap, the button changes automatically (no setState needed!)
3. Callback: The onTap callback receives the new state as (bool newState)
4. Your Logic: Implement your feature logic in the callback

No need for external state management! 🎉

📱 Show Environment Info #

AppBar(
  title: Text('My App'),
  actions: [
    EnvironmentIndicator(), // Current environment indicator
  ],
)

// Or anywhere
EnvironmentInfo(
  showBaseUrl: true,
  showDescription: true,
)

🌟 Features #

• ✅ Setup in 3 steps - No more!
• ✅ Hidden access - Multiple taps to access
• ✅ Password protection - Customizable
• ✅ Ready-to-use screen - No coding needed
• ✅ Auto save - Remembers your choice
• ✅ Environment indicator - Shows current environment
• ✅ Comprehensive tests - 21/21 tests passed

🔧 Advanced Setup #

Add Staging Environment #

await EnvService.initialize(
  developmentUrl: 'https://dev-api.com',
  productionUrl: 'https://api.com',
  stagingUrl: 'https://staging-api.com', // Optional
  defaultEnvironment: EnvironmentType.development,
);

Access Settings Manually #

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => EnvSwitcherScreen(),
  ),
);

Use Widget Instead of Wrapper #

AppBar(
  actions: [
    EnvSwitcher(
      onEnvironmentChanged: (env) {
        print('Switched to ${env.name}');
      },
    ),
  ],
)

📋 API Reference #

EnvService.initialize() #

static Future<void> initialize({
  String? developmentUrl,    // Development environment URL
  String? productionUrl,     // Production environment URL
  String? stagingUrl,        // Staging environment URL (optional)
  EnvironmentType? defaultEnvironment, // Default environment
});

BaseUrlManager #

// Get current Base URL
String get currentBaseUrl;

// Get current environment name
String get currentEnvironmentName;

// Get current environment object
Environment get currentEnvironment;

EnvironmentType Enum #

enum EnvironmentType {
  development,
  staging,
  production,
  local,
}

// Usage
EnvironmentType.development.displayName  // "Development"
EnvironmentType.production.description   // "Production environment"

SimpleBaseUrlWrapper #

class SimpleBaseUrlWrapper extends StatelessWidget {
  final Widget child;        // Widget to wrap
  final String? password;    // Password (default: "admin")
  final int? tapCount;       // Number of taps (default: 7)
  final List<ConfigurationItem>? configurations; // Custom configurations
}

ConfigurationItem #

class ConfigurationItem {
  final String title;           // Configuration title
  final String? description;    // Optional description
  final bool enabled;           // Initial enabled state
  final Function(bool newState)? onTap;  // Callback when tapped (receives new state)
  final Widget? customWidget;    // Optional custom widget
}

Note: The toggle button manages its own state automatically. The enabled parameter sets the initial state, and onTap receives the new state after toggle.

🚀 Complete Example #

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await EnvService.initialize(
    developmentUrl: 'https://dev-api.mycompany.com',
    productionUrl: 'https://api.mycompany.com',
    defaultEnvironment: EnvironmentType.development,
  );
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
          actions: [EnvironmentIndicator()],
        ),
        body: SimpleBaseUrlWrapper(
          password: "myapp123",
          tapCount: 5,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Current Environment: ${BaseUrlManager.instance.currentEnvironmentName}'),
                Text('Base URL: ${BaseUrlManager.instance.currentBaseUrl}'),
                ElevatedButton(
                  onPressed: () async {
                    final response = await http.get(
                      Uri.parse('${BaseUrlManager.instance.currentBaseUrl}/api/users'),
                    );
                    print('Response: ${response.body}');
                  },
                  child: Text('Test API Call'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

📦 Installation #

flutter pub add base_url_switcher

🧪 Testing #

flutter test

📄 License #

MIT License - see LICENSE file for details.

⭐ Support #

If you find this package helpful, please give it a ⭐ on pub.dev!

Made with ❤️ for the Flutter community