IconButton с строкой

Question

Я хотел бы в этом коде поместить IconButton в правый верхний угол каждого ItemView. ItemDescription и ItemTitle по центру вверху. Я пытаюсь разместить их в одном ряду, но не могу собрать их вместе: IconButton либо прикрепляется к тексту, либо находится посередине. Думаю, это легко, но я не нашел решения.

Вот код:

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../recyclerview/data.dart';
import 'package:watch/constants.dart';


class ListViewExample extends StatefulWidget {
  @override 
  State<StatefulWidget> createState() {
    return new ListViewExampleState(
    );
  }
}

class ListViewExampleState extends State<ListViewExample>{
  List<Container> _buildListItemsFromItems(){
    int index = 0;
    return item.map((item){

      var container = Container(
        decoration: index % 2 == 0?
        new BoxDecoration(color: const Color(0xFFFFFFFF)):
          new BoxDecoration(
            color: const Color(0xFFFAFAF5)
          ),
        child: new Row(
          children: <Widget>[
            new Container(
              margin: new EdgeInsets.all(5.0),
              child: new CachedNetworkImage(
                imageUrl: item.imageURL,
                width: 200.0,
                height: 100.0,
                fit: BoxFit.cover,
              ),
            ),
            Expanded(
              child: Row(
                children: <Widget>[
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.only(bottom: 75.0 ),
                          child: Text(
                             item.title,
                            style: kItemTitle,
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.only(left: 15.0),
                          child:Text(
                            item.description,
                            style: kItemDescription,
                          ),
                        ),
                      ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        child: IconButton(
                          icon: Icon(Icons.favorite_border, color: Colors.black,),
                          iconSize: 24.0,
                          onPressed: null
                        ),
                      )
                  ],)
              ]),
            ),
          ]),
      );
      index = index + 1;
      return container;
    }).toList();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
       appBar: AppBar(
         title: Text('Accueil', style: kAppBarStyle,),
          backgroundColor: Colors.white,  
          elevation: 0,
       ),
       body: ListView(
      children: _buildListItemsFromItems(),
    ),
    );
  }
}

Обновление: я добавил Spacer() и поместите все в одну строку и установите CrossAxisAlignment на.center.

Answer 1

Поместите значок в ту же строку, что и заголовок и описание, с разделителем () между ними. Тогда это приведет к ошибке переполнения, потому что Spacer хочет занять как можно больше места физически, поэтому без ограничений он продолжается до бесконечности. Чтобы сообщить Spacer, что ему разрешено только ограниченное пространство, вы должны установить mainAxisSize строки на MainAxisSize.min

Вот код с парой изменений, поэтому я смог запустить его сам.

import 'package:flutter/material.dart';

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

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

class ListViewExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new ListViewExampleState();
  }
}

class ListViewExampleState extends State<ListViewExample> {
  var items = [
    Item(),
    Item(),
    Item(),
    Item(),
  ];
  List<Container> _buildListItemsFromItems() {
    int index = 0;
    return items.map(
      (item) {
        var container = Container(
          decoration: index % 2 == 0
              ? new BoxDecoration(color: const Color(0xFFFFFFFF))
              : new BoxDecoration(color: const Color(0xFFFAFAF5)),
          child: new Row(
            children: <Widget>[
              new Container(
                margin: new EdgeInsets.all(5.0),
                child: new Container(
                  color: Colors.red,
                  width: 150.0,
                  height: 100.0,
                ),
              ),
              Expanded(
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      padding: const EdgeInsets.only(bottom: 75.0),
                      child: Text(
                        item.title,
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.only(left: 15.0),
                      child: Text(
                        item.description,
                      ),
                    ),
                    Spacer(),
                    GestureDetector(
                      child: Icon(
                        Icons.favorite_border,
                        size: 14,
                        color: Colors.black,
                      ),
                      onTap: null,
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
        index = index + 1;
        return container;
      },
    ).toList();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Accueil'),
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: ListView(
        children: _buildListItemsFromItems(),
      ),
    );
  }
}

class Item {
  final String title;
  final String description;

  Item({this.title = 'FooTitle', this.description = 'BarDescription'});
}