Question 260373 in CSS Question posted in
Some basic documentation can be found here.

How to achieve CSS 'align-items: end' behavior in Flutter with the Wrap widget?

I’m currently working on a Flutter project where I need to achieve a specific layout behavior similar to what I can achieve with CSS align-items: end in a flex container. In my CSS example, I have the following code:

<style>
    .container{
      display:flex;
      background:yellow;
      height:200px;
      width:200px;
      flex-flow:row wrap;
      justify-content:start;
      align-content:stretch;
      align-items:end;
    }
    .item{
      width:50px;
      background:red;
    }
</style>
<section class="container">
  <!-- Items here...  -->
</section>

Now, I’m trying to replicate this layout behavior in Flutter using the Wrap widget, but I’m facing challenges in achieving the same result. Here’s a simplified version of my Flutter code:

Container(
  height: 200,
  width: 200,
  color: Colors.yellow,
  child: Wrap(
    alignment: WrapAlignment.start, // I'm unsure how to achieve 'align-items: end' behavior here
    crossAxisAlignment: WrapCrossAlignment.end, // This doesn't seem to give me the desired result
    direction: Axis.horizontal,
    textDirection: TextDirection.ltr,
    spacing: 10,
    clipBehavior: Clip.antiAlias,
    verticalDirection: VerticalDirection.down,
    runSpacing: 10,
    runAlignment: WrapAlignment.start,
    children: <Widget>[
      // ... Children widgets here ...
    ],
  ),
)

I’ve experimented with various properties of the Wrap widget, but I haven’t been able to achieve the desired ‘align-items: end’ behavior.

I would greatly appreciate any guidance on how to achieve ‘align-items: end’ behavior within Flutter using the Wrap widget or any alternative approaches to replicate this CSS behavior. Thank you in advance for your help!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution to the issue I posted earlier. When the heights of the items in a Wrap widget are equal, the effect of crossAxisAlignment might not be obvious. However, by randomizing the heights of the items, the effect of crossAxisAlignment becomes more apparent.

    dart code:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flexbox'),
        ),
        body: FlexboxContainer(),
      ),
    );
  }
}

class FlexboxContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final random = Random();
   
    return Container(
      color: Colors.yellow,
      width: double.infinity,
      height:double.infinity,
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.end,
        alignment: WrapAlignment.spaceAround,
        direction: Axis.horizontal,
        textDirection: TextDirection.ltr,
        spacing: 10,
        clipBehavior: Clip.antiAlias,
        verticalDirection: VerticalDirection.down,
        runSpacing: 10,
        runAlignment: WrapAlignment.start,
        children:  List.generate(10, (index){
          double randomNumber = random.nextInt(50) + 10;
          return Container(width: 50,height:randomNumber, color: Colors.red, );
        }),
      ),
    );
  }
}

  2. 0

    Have you tried WrapAlignment.end ?

    body: Center(
          child: Container(
            width: 300,
            height: 200,
            color: Colors.grey,
            child: Wrap(
              alignment: WrapAlignment.end, // Similar to align-items: end
              children: <Widget>[
                Container(width: 50, height: 50, color: Colors.red),
                Container(width: 50, height: 50, color: Colors.green),
                Container(width: 50, height: 50, color: Colors.blue),
              ],
            ),
          ),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search