How to constraint item position in flutter?

user_15991847 0
Viewed 243

I try to make a list of widget. It look like this:

enter image description here

I know of no such thing as Constraint Layout in flutter. But I need something to position my arrow icon in a fixed position on the right. To put it simple, this is my widget code:

Row(
children:[
  SizedBox(),
  Column(),//this is all the item on the left
  Spacer(),
  Expanded(// this is the heart and arrow button
   child: Column()
  )
]
)

I notice that if my column on the left get too wide, my arrow and heart icon is shifted out of line. enter image description here

How to put my icon in fixed position to the right?

flutter row widget user-interface
1 Answers

here try this, You have to wrap middle column with expanded so it will take the maximum space available

enter image description here

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (_, index) => Container(
        padding: EdgeInsets.all(15),
        margin: EdgeInsets.symmetric(vertical: 5),
        decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),border: Border.all(width: 1.5)),
        child: Row(
          children: [
            Container(
              width: 25,
              height: 40,
              color: Colors.black,
            ),
            Expanded(
              child: Column(children: [
              //put your children here
              ]),
            ),
            //this will be always on right
            Column(
              children: [
                Icon(Icons.heart_broken),
                Icon(Icons.chevron_right),
              ],
            )
          ],
        ),
      ),
    );
  }
}
user_152255660
Related