如何约束颤动中的项目位置？

Question

我尝试制作一个小部件列表。它看起来像这样：

我知道 flutter 中没有约束布局之类的东西。但我需要一些东西将我的箭头图标放置在右侧的固定位置。简而言之，这是我的小部件代码：

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

我注意到，如果左侧的列太宽，我的箭头和心形图标就会移出直线。

如何将我的图标放在右侧的固定位置？

Answer 1

在这里尝试一下，您必须与扩展的中间列包裹中间列，以便将最大可用空间

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