Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align center of an image to the bottom of another image in flutter

Currently I'm facing a problem for creating responsive design in flutter so it could work fine with the same look and feel to all screen sizes

Currently I need to create like the image below, I need the center of an image (the red one in the image below) to be aligned to the bottom of another one (the blue big image) , sometimes the red one is centered but in different screen sizes its either raised a little bit to the top or to the bottom.

enter image description here

This is my attempt:

class ImageAssetUtils 
{
    static Image drawImage(String imagePath, double requiredWidth, double requiredHeight) 
    {
        double screenFactor = 1.0;
        screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.8 : screenFactor;
        screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.21 : screenFactor;
        requiredWidth = requiredWidth * screenFactor;
        requiredHeight = requiredHeight * screenFactor;
        return new Image.asset(imagePath, width: requiredWidth, height: requiredHeight);
    }
}

class StyleUtils 
{
    static EdgeInsets givePadding(EdgeInsets absoluteEdges)
    {
        double screenFactor = 1.0;
        screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.75 : screenFactor;
        screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.14 : screenFactor;

        double left = absoluteEdges.left * screenFactor;
        double right = absoluteEdges.right * screenFactor;
        double top = absoluteEdges.top * screenFactor;
        double bottom = absoluteEdges.bottom * screenFactor;

        return EdgeInsets.only(left: left, right: right, top: top, bottom: bottom);
    }
}  

class Test extends StatefulWidget 
{
    @override
    _TestState createState() => _TestState();
}

class _TestState extends State<Test> 
{
    @override
    Widget build(BuildContext context)
    {
        return new Scaffold(
            backgroundColor: Color.fromRGBO(235, 235, 235, 1.0),
            body: new Stack(children: <Widget>[
                new Image.asset('some Image.png',
                    fit: BoxFit.fill,
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height * 0.33
                ),
                ListView(children: <Widget>[
                    new Padding(
                        padding: StyleUtils.givePadding(EdgeInsets.only(top: 16.0)),
                        child: new Center(
                            child: new Container(
                                child: ImageAssetUtils.drawImage("my image.png", 100.0, 100.0),
                            ),
                        )
                     )
                ]),
            ])
        );
    }
}

If any help is it will be much appreciated, thanks in advance.

like image 466
Hesham Ali Kamal Avatar asked Oct 24 '18 11:10

Hesham Ali Kamal


People also ask

How do I center align an image in Flutter?

To center align the widgets in the Row widget, you can use the mainAxisAlignment property and set it to MainAxisAlignment. center.

How do you align center in Flutter?

To center align the text in a Text widget, provide textAlign property with value TextAlign. center .

How do you align the button to the bottom in Flutter?

drawer: new Drawer( child: new Column( mainAxisSize: MainAxisSize. max, children: <Widget>[ new Text('Top'), new Align( alignment: FractionalOffset. bottomCenter, child: new Text('Bottom'), ), ], ), ), The bottom text should be aligned to the bottom of the drawer, but It isn't!


1 Answers

The FractionalTranslation widget is used to manipulate the position of a child widget. You'll also have to pass an Offset to it, which will define the position manipulation. The child widget would be the red rectangle and the Offset would have the values x: 0.0 and y: 0.5. This would place the red rectangle lower, by the half of its height.

Now you can lay the red rectangle above the blue one. To do this, you can use the Stack widget. You'll have to set alignment: Alignment.bottomCenter, such that the red rectangle is placed at the lower edge in the center.

You can find a code example below. The blue rectangle has a third of the size of the screen. The red rectangle is half as large as the blue one.

example screen

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(theme: ThemeData(), home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlueRedRects(
          big: MediaQuery.of(context).size.width / 3.0,
          small: MediaQuery.of(context).size.width / 6.0,
        ),
      ),
    );
  }
}

class BlueRedRects extends StatelessWidget {
  final double big;
  final double small;

  BlueRedRects({this.big, this.small});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        Container(color: Colors.blue, width: big, height: big),
        FractionalTranslation(
          translation: Offset(0.0, 0.5),
          child: Container(
            color: Colors.red,
            width: small,
            height: small,
          ),
        )
      ],
    );
  }
}
like image 115
NiklasPor Avatar answered Sep 30 '22 08:09

NiklasPor