align_positioned 1.0.7

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 79

align_positioned #

A widget that aligns, positions and optionally sizes its child within itself.

Align and Position #

The alignment parameter works as expected. For example, Alignment.bottomRight represents the bottom right of the container, and Alignment(0.0, 0.0) represents the center of the container. The distance from -1.0 to +1.0 is the distance from one side of the rectangle to the other side of the rectangle.

If touch is Touch.inside, then alignment works just like the alignment for the Align widget, aligning the child inside of the container.

However, if touch is Touch.outside, then the alignment happens outside of the container.

As another example, if touch is Touch.inside, then Alignment(1.0, 0.0) makes the child's right side touch the right side of the container (it touches the container from the inside).

But if touch is Touch.outside, then Alignment(1.0, 0.0) makes the child's left side touch the right side of the container (it touches the container from the outside).

Parameters dx and dy can be positive or negative, and move the child horizontally and vertically, in pixels.

Parameters moveByChildWidth and moveByChildHeight can be positive or negative, and move the child horizontally and vertically, but the unit here is not pixels, but child widths and heights.

Parameters moveByContainerWidth and moveByContainerHeight can be positive or negative, and move the child horizontally and vertically, but the unit here is not pixels, but container widths and heights.

Align and Position Examples #

The below image shows the center of the child positioned 15 pixels to the right of the top-left corner of the container:

alt text

AlignPositioned(
   child: child,        
   alignment: Alignment.topLeft,
   touch: Touch.inside,
   dx: 15.0, // Move 4 pixels to the right. 
   moveByChildWidth: -0.5, // Move half child width to the left.  
   moveByChildHeight: -0.5); // Move half child height to the top.
   

Then, to move the child one container width to the right, and one container height to the bottom:

alt text

AlignPositioned(
   child: child,        
   alignment: Alignment.topLeft,
   touch: Touch.inside,
   dx: 15.0, // Move 4 pixels to the right. 
   moveByChildWidth: -0.5, // Move half child width to the left.  
   moveByChildHeight: -0.5, // Move half child height to the top.
   moveByContainerWidth: 1.0, // Move one container width to the right.
   moveByContainerHeight: 1.0); // Move one container height to the bottom.               

Please, check the example tab for the effects seen below:

alt text

Sizing #

Optionally, you can also define the child size:

  • childWidth is the child width, in pixels.

  • childHeight is the child height, in pixels.

  • minChildWidth is the minimum width, in pixels. It has precedence over childWidth.

  • minChildHeight is the minimum height, in pixels. It has precedence over childHeight.

  • maxChildWidth is the maximum width, in pixels. It has precedence over childWidth.

  • maxChildHeight is the maximum height, in pixels. It has precedence over childHeight.

  • childWidthRatio is the child width, as a fraction of the container width. If between 0.0 and 1.0, the child will be smaller than its container. If more than 1.0, the child will be larger than its container. You cannot define both childWidthRatio and childWidth at the same time.

  • childHeightRatio is the child height, as a fraction of the container height. If between 0.0 and 1.0, the child will be smaller than its container. If more than 1.0, the child will be larger than its container. You cannot define both childHeightRatio and childHeight at the same time.

  • minChildWidthRatio is the minimum child width, as a fraction of the container width. It has precedence over childWidth. If both minChildWidth and minChildWidthRatio are defined, both will be applied (the minimum will be the larger one).

  • minChildHeightRatio. is the minimum child height, as a fraction of the container height. It has precedence over childHeight. If both minChildHeight and minChildHeightRatio are defined, both will be applied (the minimum will be the larger one).

  • maxChildWidthRatio is the maximum child width, as a fraction of the container width. It has precedence over childWidth. If both maxChildWidth and maxChildWidthRatio are defined, both will be applied (the maximum will be the smaller one).

  • maxChildHeightRatio is the maximum child height, as a fraction of the container height. It has precedence over childHeight. If both maxChildHeight and maxChildHeightRatio are defined, both will be applied (the maximum will be the smaller one).

  • wins decides what happens if the minimum size is larger then the maximum size. If wins is Wins.min, the default, the minimum size will be used.
    If wins is Wins.max, the maximum size will be used.

Usage #

Import the package #

First, add align_positioned as a dependency in your pubspec.yaml

Then, import it:

import 'package:align_positioned/align_positioned.dart';

[1.0.4] - 22/02/2019

  • Code and examples.

[1.0.6] - 23/02/2019

  • Added moveByContainerWidth and moveByContainerHeight.

[1.0.7] - 23/02/2019

  • Added size parameters.

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) {
    //

    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: circlesInside())),
              //
              SizedBox(height: 50, width: double.infinity),
              //
              Container(
                  width: 150,
                  height: 150,
                  color: Colors.yellow,
                  child: Stack(children: circlesOutside())),
              //
              SizedBox(height: 60),
              //
              Container(
                  width: 150,
                  height: 150,
                  color: Colors.yellow,
                  child: Stack(children: circlesWithOffset())),
              SizedBox(height: 100),
              //
              Container(
                  width: 150,
                  height: 150,
                  color: Colors.yellow,
                  child: Stack(children: circlesWithNamedAlignments())),
              //
              SizedBox(height: 50),
              //
              Container(
                  width: 150,
                  height: 150,
                  color: Colors.yellow,
                  child: Stack(children: circlesWithmoveByChildWidthAndmoveByChildHeightInside())),
              //
              SizedBox(height: 50),
              //
              Container(
                  width: 150,
                  height: 150,
                  color: Colors.yellow,
                  child: Stack(children: circlesWithmoveByChildWidthAndmoveByChildHeightOutside())),
              //
              SizedBox(height: 80),
              //
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
                child: Stack(
                  children: <Widget>[
                    AlignPositioned(
                      touch: Touch.inside,
                      alignment: Alignment.topLeft,
                      dx: 15.0,
                      moveByChildWidth: -0.5,
                      moveByChildHeight: -0.5,
                      child: circle(Color(0x50000000), 60.0),
                    ),
                    AlignPositioned(
                      touch: Touch.inside,
                      alignment: Alignment.topLeft,
                      dx: 15.0,
                      moveByChildWidth: -0.5,
                      moveByChildHeight: -0.5,
                      child: circle(Colors.white, 5.0),
                    ),
                  ],
                ),
              ),
              //
              SizedBox(height: 50),
              //
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
                child: Stack(
                  children: <Widget>[
                    AlignPositioned(
                      touch: Touch.inside,
                      alignment: Alignment.topLeft,
                      dx: 15.0,
                      moveByChildWidth: -0.5,
                      moveByChildHeight: -0.5,
                      moveByContainerWidth: 1,
                      moveByContainerHeight: 1,
                      child: circle(Color(0x50000000), 60.0),
                    ),
                    AlignPositioned(
                      touch: Touch.inside,
                      alignment: Alignment.topLeft,
                      dx: 15.0,
                      moveByChildWidth: -0.5,
                      moveByChildHeight: -0.5,
                      moveByContainerWidth: 1,
                      moveByContainerHeight: 1,
                      child: circle(Colors.white, 5.0),
                    ),
                  ],
                ),
              ),
              //
              SizedBox(height: 50),
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> circlesWithmoveByChildWidthAndmoveByChildHeightInside() {
    var children1 = <Widget>[];
    children1.addAll(
        circles(Colors.red, Touch.inside, 0, -1, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.inside, 0, -1, moveByChildWidth: 1.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.green, Touch.inside, 0, -1, moveByChildWidth: -1.0, moveByChildHeight: 0.0));

    children1.addAll(
        circles(Colors.red, Touch.inside, 1, 0, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.inside, 1, 0, moveByChildWidth: 0.0, moveByChildHeight: 1.0));
    children1.addAll(
        circles(Colors.green, Touch.inside, 1, 0, moveByChildWidth: 0.0, moveByChildHeight: -1.0));

    children1.addAll(
        circles(Colors.red, Touch.inside, 0, 1, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.inside, 0, 1, moveByChildWidth: 1.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.green, Touch.inside, 0, 1, moveByChildWidth: -1.0, moveByChildHeight: 0.0));

    children1.addAll(
        circles(Colors.red, Touch.inside, -1, 0, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.inside, -1, 0, moveByChildWidth: 0.0, moveByChildHeight: 1.0));
    children1.addAll(
        circles(Colors.green, Touch.inside, -1, 0, moveByChildWidth: 0.0, moveByChildHeight: -1.0));
    return children1;
  }

  List<Widget> circlesWithmoveByChildWidthAndmoveByChildHeightOutside() {
    var children1 = <Widget>[];
    children1.addAll(
        circles(Colors.red, Touch.outside, 0, -1, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.outside, 0, -1, moveByChildWidth: 1.0, moveByChildHeight: 0.0));
    children1.addAll(circles(Colors.green, Touch.outside, 0, -1,
        moveByChildWidth: -1.0, moveByChildHeight: 0.0));

    children1.addAll(
        circles(Colors.red, Touch.outside, 1, 0, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.outside, 1, 0, moveByChildWidth: 0.0, moveByChildHeight: 1.0));
    children1.addAll(
        circles(Colors.green, Touch.outside, 1, 0, moveByChildWidth: 0.0, moveByChildHeight: -1.0));

    children1.addAll(
        circles(Colors.red, Touch.outside, 0, 1, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.outside, 0, 1, moveByChildWidth: 1.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.green, Touch.outside, 0, 1, moveByChildWidth: -1.0, moveByChildHeight: 0.0));

    children1.addAll(
        circles(Colors.red, Touch.outside, -1, 0, moveByChildWidth: 0.0, moveByChildHeight: 0.0));
    children1.addAll(
        circles(Colors.blue, Touch.outside, -1, 0, moveByChildWidth: 0.0, moveByChildHeight: 1.0));
    children1.addAll(circles(Colors.green, Touch.outside, -1, 0,
        moveByChildWidth: 0.0, moveByChildHeight: -1.0));
    return children1;
  }

  List<Widget> circlesInside() {
    var children1 = <Widget>[];
    children1.addAll(circles(Colors.red, Touch.inside, 0, -1));
    children1.addAll(circles(Colors.red, Touch.inside, -1, 0));
    children1.addAll(circles(Colors.red, Touch.inside, 0, 1));
    children1.addAll(circles(Colors.red, Touch.inside, 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));
    return children1;
  }

  List<Widget> circlesOutside() {
    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.outside, -1, -1));
    children1.addAll(circles(Colors.blue, Touch.outside, -1, 1));
    children1.addAll(circles(Colors.blue, Touch.outside, 1, 1));
    children1.addAll(circles(Colors.blue, Touch.outside, 1, -1));
    return children1;
  }

  List<Widget> circlesWithOffset() {
    var children2 = <Widget>[];
    children2.addAll(circles(Colors.purple, Touch.outside, 0, -1, dx: -15, dy: 15));
    children2.addAll(circles(Colors.purple, Touch.outside, -1, 0, dx: -15, dy: 15));
    children2.addAll(circles(Colors.purple, Touch.outside, 0, 1, dx: -15, dy: 15));
    children2.addAll(circles(Colors.purple, Touch.outside, 1, 0, dx: -15, dy: 15));
    children2.addAll(circles(Colors.green, Touch.inside, 0, -1, dx: -15, dy: 15));
    children2.addAll(circles(Colors.green, Touch.inside, -1, 0, dx: -15, dy: 15));
    children2.addAll(circles(Colors.green, Touch.inside, 0, 1, dx: -15, dy: 15));
    children2.addAll(circles(Colors.green, Touch.inside, 1, 0, dx: -15, dy: 15));

    return children2;
  }

  List<Widget> circles(
    Color color,
    Touch touch,
    int dirX,
    int dirY, {
    double dx,
    double dy,
    double moveByChildWidth,
    double moveByChildHeight,
  }) {
    return <Widget>[
      alignPositionedCircle(
          0.0, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.1, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.2, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.3, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.4, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.5, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.6, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.7, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.8, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          0.9, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
      alignPositionedCircle(
          1.0, color, dirX, dirY, touch, dx, dy, moveByChildWidth, moveByChildHeight),
    ];
  }

  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),
    ];
  }

  AlignPositioned alignPositionedCircle(
    double mult,
    Color color,
    int dirX,
    int dirY,
    Touch touch,
    double dx,
    double dy,
    double moveByChildWidth,
    double moveByChildHeight,
  ) {
    return AlignPositioned(
        child: circle(color),
        alignment: Alignment(mult * dirX, mult * dirY),
        touch: touch,
        dx: dx,
        dy: dy,
        moveByChildWidth: moveByChildWidth,
        moveByChildHeight: moveByChildHeight);
  }

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

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  align_positioned: ^1.0.7

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:align_positioned/align_positioned.dart';
  
Version Uploaded Documentation Archive
1.0.7 Feb 23, 2019 Go to the documentation of align_positioned 1.0.7 Download align_positioned 1.0.7 archive
1.0.6 Feb 23, 2019 Go to the documentation of align_positioned 1.0.6 Download align_positioned 1.0.6 archive
1.0.5 Feb 23, 2019 Go to the documentation of align_positioned 1.0.5 Download align_positioned 1.0.5 archive
1.0.4 Feb 22, 2019 Go to the documentation of align_positioned 1.0.4 Download align_positioned 1.0.4 archive
1.0.3 Feb 22, 2019 Go to the documentation of align_positioned 1.0.3 Download align_positioned 1.0.3 archive
1.0.2 Feb 22, 2019 Go to the documentation of align_positioned 1.0.2 Download align_positioned 1.0.2 archive
1.0.1 Feb 22, 2019 Go to the documentation of align_positioned 1.0.1 Download align_positioned 1.0.1 archive
1.0.0 Feb 22, 2019 Go to the documentation of align_positioned 1.0.0 Download align_positioned 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
58
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
79
Learn more about scoring.

We analyzed this package on Jun 12, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.1
  • pana: 0.12.17
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/align_positioned.dart.

Run flutter format to format lib/align_positioned.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test