I have the following code to display icons sort and arrow_drop_down. How can I modify the code to align one icon to the left edge, and one icon to the right edge?

  @override
  Widget build(BuildContext context) {
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          child: Row(children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ]))
    ]);
  }

CodePudding user response：

can you try with this code ?

  Widget build(BuildContext context) {
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          right: 5.0,
          child: Row(children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ],
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),)
    ]);
  }

CodePudding user response：

Just add mainAxisAlignment and crossAxisAligment to your Row mainAxisAligment provide control of principal axis and crossAxisAligment over the secondary.

@override
  Widget build(BuildContext context) {
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ]))
    ]);
  }

Another option is using Spacer() widget this send each element to his own sides

On this way:

@override
  Widget build(BuildContext context) {
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          child: Row(children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
 
            Spacer(),
           
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ]))
    ]);
  }