Filament Flex Layout Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require kingmaker/filament-flex-layout
   

   Ensure your Filament version is 3.3+ (check filament/filament package).

2. First Use Case: Replace a default Split layout in a Form or Infolist with Flex:

   use Kingmaker\FilamentFlexLayout\Components\Flex;
   
   Flex::make()
       ->schema([
           TextInput::make('name')->columnSpanFull(),
           TextInput::make('description')->columnSpanFull(),
       ])
       ->horizontalArrangement(HorizontalArrangement::Start)
       ->gap(16),
   

3. Key Files:

   • app/Providers/FilamentServiceProvider.php (register if not auto-discovered).
   • resources/views/vendor/filament/... (custom overrides if needed).

Implementation Patterns

Workflows

1. Responsive Flex Layouts: Use horizontalArrangement() with Filament’s responsive modifiers:

   Flex::make()
       ->horizontalArrangement([
           'sm' => HorizontalArrangement::Center,
           'lg' => HorizontalArrangement::SpaceBetween,
       ])
       ->gap(16),
   

2. Conditional Gap: Dynamically adjust gaps based on context (e.g., form size):

   Flex::make()
       ->gap(fn (Get) => Get::hasRecord() ? 24 : 16),
   

3. Nested Flex Containers: Combine with other layouts (e.g., Columns, Tabs):

   Tabs::make('tabs')->columns(2)
       ->tab('Tab 1', Flex::make()->schema([/* ... */]))
       ->tab('Tab 2', Flex::make()->schema([/* ... */])),
   

Integration Tips

• Column Span Compatibility: Ensure child fields use columnSpanFull() or columnSpan('full') for full-width alignment.

  TextInput::make('title')->columnSpanFull(),
  

• Form Actions: Place buttons in Flex for aligned action groups:

  Flex::make()
      ->schema([
          SubmitAction::make('save'),
          Action::make('export')->color('gray'),
      ])
      ->horizontalArrangement(HorizontalArrangement::End),
  

• Infolist Usage: Align labels/values dynamically:

  Flex::make()
      ->schema([
          TextEntry::make('user.name'),
          TextEntry::make('user.email'),
      ])
      ->horizontalArrangement(HorizontalArrangement::SpaceBetween),
  

Gotchas and Tips

Pitfalls

1. grow(false) Requirement:

   • Issue: Children must explicitly disable grow(); otherwise, justify-content fails.
   • Fix:

     TextInput::make('field')->grow(false),
     

2. CSS Conflicts:

   • Issue: Custom CSS may override gap or justify-content.
   • Fix: Use !important in your package’s CSS or inspect Filament’s compiled styles.

3. Filament v4+:

   • Issue: Native Flex exists in v4; this package is v3-only.
   • Fix: Migrate or use Split with custom CSS for v4.

Debugging

• Inspect Rendered HTML: Check if flex-gap or justify-content classes are applied via browser dev tools.

  <!-- Expected: -->
  <div class="flex justify-start gap-4">
  

• Log Schema: Debug layout structure with:

  dd(Flex::make()->schema([/* ... */])->getSchema());
  

Extension Points

1. Custom Horizontal Arrangements: Extend HorizontalArrangement enum:

   namespace App\Enums;
   use Kingmaker\FilamentFlexLayout\Enums\HorizontalArrangement as BaseArrangement;
   
   enum CustomArrangement: string {
       case CustomCenter = 'custom-center';
   }
   
   // Register in service provider.
   

2. Dynamic Gap Calculation: Override gap logic in a custom Flex class:

   class CustomFlex extends Flex {
       public function gap($value): static {
           return $this->state(['gap' => $value * 2]); // Double gap
       }
   }
   

3. Theme Integration: Sync gap sizes with Filament’s theme:

   // config/filament.php
   'gap' => [
       'sm' => 8,
       'md' => 16,
       'lg' => 24,
   ],