align_positioned 1.0.3

A widget that aligns and positions its child within itself.

example/main.dart

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

void main() async => runApp(MaterialApp(home: Demo()));

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //
    var children1 = <Widget>[];
    children1.addAll(circles(Colors.red, Touch.outside, 0, -1));
    children1.addAll(circles(Colors.red, Touch.outside, -1, 0));
    children1.addAll(circles(Colors.red, Touch.outside, 0, 1));
    children1.addAll(circles(Colors.red, Touch.outside, 1, 0));
    children1.addAll(circles(Colors.blue, Touch.inside, -1, -1));
    children1.addAll(circles(Colors.blue, Touch.inside, -1, 1));
    children1.addAll(circles(Colors.blue, Touch.inside, 1, 1));
    children1.addAll(circles(Colors.blue, Touch.inside, 1, -1));

    var children2 = <Widget>[];
    children2.addAll(circles(Colors.red, Touch.outside, 0, -1, -15, 15));
    children2.addAll(circles(Colors.red, Touch.outside, -1, 0, -15, 15));
    children2.addAll(circles(Colors.red, Touch.outside, 0, 1, -15, 15));
    children2.addAll(circles(Colors.red, Touch.outside, 1, 0, -15, 15));
    children2.addAll(circles(Colors.blue, Touch.inside, -1, -1, -15, 15));
    children2.addAll(circles(Colors.blue, Touch.inside, -1, 1, -15, 15));
    children2.addAll(circles(Colors.blue, Touch.inside, 1, 1, -15, 15));
    children2.addAll(circles(Colors.blue, Touch.inside, 1, -1, -15, 15));

    var children3 = circlesWithNamedAlignments();

    return Scaffold(
      appBar: AppBar(title: const Text('Align Positioned Widget Example')),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              SizedBox(height: 50, width: double.infinity),
              Container(
                  width: 150, height: 150, color: Colors.yellow, child: Stack(children: children1)),
              SizedBox(height: 60),
              Container(
                  width: 150, height: 150, color: Colors.yellow, child: Stack(children: children2)),
              SizedBox(height: 100),
              Container(
                  width: 150, height: 150, color: Colors.yellow, child: Stack(children: children3)),
              SizedBox(height: 50),
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> circles(Color color, Touch touch, int x, int y, [double dx, double dy]) {
    return <Widget>[
      //
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.0 * x, 0.0 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.1 * x, 0.1 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.2 * x, 0.2 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.3 * x, 0.3 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.4 * x, 0.4 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.5 * x, 0.5 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.6 * x, 0.6 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.7 * x, 0.7 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.8 * x, 0.8 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(0.9 * x, 0.9 * y),
          touch: touch,
          dx: dx,
          dy: dy),
      AlignPositioned(
          child: circle(color),
          alignment: Alignment(1.0 * x, 1.0 * y),
          touch: touch,
          dx: dx,
          dy: dy),
    ];
  }

  List<Widget> circlesWithNamedAlignments() {
    return <Widget>[
      AlignPositioned(
          child: circle(Colors.orange), alignment: Alignment.center, touch: Touch.inside),
      AlignPositioned(
          child: circle(Colors.orange), alignment: Alignment.center, touch: Touch.outside),

      //
      AlignPositioned(
          child: circle(Colors.green), alignment: Alignment.centerRight, touch: Touch.inside),
      AlignPositioned(
          child: circle(Colors.green), alignment: Alignment.bottomCenter, touch: Touch.inside),
      AlignPositioned(
          child: circle(Colors.green), alignment: Alignment.centerLeft, touch: Touch.inside),
      AlignPositioned(
          child: circle(Colors.green), alignment: Alignment.topCenter, touch: Touch.inside),
      //
      AlignPositioned(
          child: circle(Colors.blue), alignment: Alignment.topRight, touch: Touch.inside),
      AlignPositioned(
          child: circle(Colors.blue), alignment: Alignment.bottomRight, touch: Touch.inside),
      AlignPositioned(
          child: circle(Colors.blue), alignment: Alignment.topLeft, touch: Touch.inside),
      AlignPositioned(
          child: circle(Colors.blue), alignment: Alignment.bottomLeft, touch: Touch.inside),
      //
      AlignPositioned(
          child: circle(Colors.red), alignment: Alignment.centerRight, touch: Touch.outside),
      AlignPositioned(
          child: circle(Colors.red), alignment: Alignment.bottomCenter, touch: Touch.outside),
      AlignPositioned(
          child: circle(Colors.red), alignment: Alignment.centerLeft, touch: Touch.outside),
      AlignPositioned(
          child: circle(Colors.red), alignment: Alignment.topCenter, touch: Touch.outside),
      //
      AlignPositioned(
          child: circle(Colors.purple), alignment: Alignment.topRight, touch: Touch.outside),
      AlignPositioned(
          child: circle(Colors.purple), alignment: Alignment.bottomRight, touch: Touch.outside),
      AlignPositioned(
          child: circle(Colors.purple), alignment: Alignment.topLeft, touch: Touch.outside),
      AlignPositioned(
          child: circle(Colors.purple), alignment: Alignment.bottomLeft, touch: Touch.outside),
    ];
  }

  Container circle(Color color) {
    return Container(
        width: 30.0,
        height: 30.0,
        decoration: BoxDecoration(
          border: Border.all(width: 1.0, color: Colors.black),
          color: color,
          shape: BoxShape.circle,
        ));
  }
}