search ESC

Searching…

No results for "".

Type at least 2 characters to search.

Docs
You are viewing an older version (0.0.5). Go to the latest.

Alignment

Position a widget within its container using the alignment-* utilities. These map directly to Flutter's Alignment constants and work on any WContainer.

Open Preview Source 

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WContainer(
  className: 'alignment-center bg-gray-200 w-full h-full',
  child: WText('Centered', className: 'text-black dark:text-white'),
);

Basic Usage

Apply an alignment-* class to a WContainer to position its child widget within the available space.

WContainer(
  className: 'alignment-top-left bg-gray-200 w-full h-64',
  child: WText('Top-Left', className: 'text-black dark:text-white'),
);

Quick Reference

Class Flutter Alignment Description
alignment-top-left Alignment.topLeft Aligns to the top-left corner
alignment-top-center Alignment.topCenter Aligns to the top-center
alignment-top-right Alignment.topRight Aligns to the top-right corner
alignment-center-left Alignment.centerLeft Aligns to the center-left edge
alignment-center Alignment.center Centers both horizontally and vertically
alignment-center-right Alignment.centerRight Aligns to the center-right edge
alignment-bottom-left Alignment.bottomLeft Aligns to the bottom-left corner
alignment-bottom-center Alignment.bottomCenter Aligns to the bottom-center
alignment-bottom-right Alignment.bottomRight Aligns to the bottom-right corner
alignment-left Alignment.centerLeft Alias for alignment-center-left
alignment-right Alignment.centerRight Alias for alignment-center-right

Combining with Flex

You can combine alignment-* with other flex and style utilities for complex layouts.

WFlexContainer(
  className: 'flex-row justify-evenly items-center w-full h-64 bg-gray-100',
  children: [
    WContainer(
      className: 'alignment-top-left bg-blue-500 w-32 h-32',
      child: WText('Top-Left', className: 'text-white'),
    ),
    WContainer(
      className: 'alignment-center bg-green-500 w-32 h-32',
      child: WText('Center', className: 'text-white'),
    ),
    WContainer(
      className: 'alignment-bottom-right bg-red-500 w-32 h-32',
      child: WText('Bottom-Right', className: 'text-white'),
    ),
  ],
);

Responsive Design

Prefix alignment-* classes with a breakpoint to change alignment at different screen sizes.

WContainer(
  className: 'alignment-top-left md:alignment-center bg-gray-200 w-full h-64',
  child: WText('Responsive Alignment', className: 'text-black dark:text-white'),
);

  • Align Items — control cross-axis alignment inside flex containers.
  • Justify Content — control main-axis alignment inside flex containers.
  • WContainer — the container widget that alignment classes are applied to.
  • Flex Direction — control the direction of flex layout.