flux_scaffold 0.0.3 copy "flux_scaffold: ^0.0.3" to clipboard
flux_scaffold: ^0.0.3 copied to clipboard

A customizable Flutter scaffold that simplifies app layout and navigation.

Flutter Tab Scaffold Navigation System #

This Flutter application is built around a custom TabScaffold widget for managing navigation tabs. The code is designed to provide a dynamic and flexible navigation system with the following features:

ScreenShort #

Screenshot_1734100157 Screenshot_1734100327 Screenshot_1734100166 Screenshot_1734100374 Screenshot_1734100386

Key Features #

Customizable Navigation Tabs #

  • Dynamic Tabs: The TabScaffold allows for the dynamic creation of tabs, with each tab linked to its own navigation stack managed by TabNavigator.
  • Configurable Items: Tabs are defined using BottomNavItem, which supports:
    • Icons for active and inactive states.
    • Labels for easy identification.
    • Optional properties like activeIcon and backgroundColor for enhanced customization.

Flexible Page Navigation #

  • Pages such as HomeScreen, HelpScreen, and SettingsScreen demonstrate usage of the navigation system.
  • Custom Transitions: CustomPageRoute provides:
    • Slide animations.
    • Bottom-sheet-like transitions.
    • Zoom-out effects.

AppScaffold for Layout Management #

  • The AppScaffold widget centralizes the application’s layout, offering:
    • Background gradients or images.
    • Custom paddings for adaptable UI designs.
    • Floating action button integration.
    • Status bar style management for a polished look.

Nested Navigation #

  • Independent navigators for each tab using TabNavigator with global keys to maintain state across tabs.
  • Each tab can have its own stack of pages, ensuring seamless navigation.

Code Highlights #

main Enter #

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return TabScaffold(
      // marginNavButtonBar: EdgeInsets.only(left: 20, right: 20),
      // backgroundImage: "assets/Images/b.jpeg",
      // topNavButtonBar: true,
      nested: true,
      paddingValue: 10,
      numberTab: 3,
      pages: [HomeScreen(), HelpScreen(), SettingsScreen()],
      bottomNavItems: [
        BottomNavItem(icon: Icons.home, label: "Home"),
        BottomNavItem(icon: Icons.help, label: "Help"),
        BottomNavItem(icon: Icons.help, label: "Help"),
      ],
      navigationBarBg: Colors.amber[100],
    );
  }
}

TabScaffold Widget #

TabScaffold(
  bottomNavItems: [
    BottomNavItem(
      icon: Icons.home,
      label: 'Home',
      activeIcon: Icons.home_filled,
    ),
    BottomNavItem(
      icon: Icons.help_outline,
      label: 'Help',
    ),
    BottomNavItem(
      icon: Icons.settings,
      label: 'Settings',
    ),
  ],
  children: [
    HomeScreen(),
    HelpScreen(),
    SettingsScreen(),
  ],
)

AppScaffold Widget #

AppScaffold(
  body: Center(child: Text('Hello, World!')),
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

How to Use #

  1. Setup Tabs: Define BottomNavItem objects with icons, labels, and optional customizations.

  2. Add Screens: Include child widgets for each tab in the TabScaffold.

  3. Implement Custom Transitions: Use CustomPageRoute to wrap your routes for smooth transitions.

  4. Style the App: Utilize AppScaffold for flexible layout and background options.

Benefits #

  • Modular and reusable navigation system.
  • Clear separation of concerns between layout, navigation, and transitions.
  • Easy to extend with new tabs or custom behaviors.

Example Output #

A sample app with three tabs:

  • Home: Displays a list of items.
  • Help: Contains FAQs and support links.
  • Settings: Allows customization of user preferences.

Customize and expand this framework to suit your specific application needs!

7
likes
130
points
39
downloads

Publisher

unverified uploader

Weekly Downloads

A customizable Flutter scaffold that simplifies app layout and navigation.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flux_scaffold