How to position items under appbar?-CodePudding

I want to position circles in this design type:

And my idea is to create two circles and position them on the top-right screen corner under appBar. As a solution is the Positioned widget. And when I want to put any position attribute like top, left, bottom and right, as a result, I get this error:


════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
Stack
When the exception was thrown, this was the stack
#2      RenderStack._computeSize
#3      RenderStack.performLayout
#4      RenderObject.layout
#5      ChildLayoutHelper.layoutChild
#6      RenderFlex._computeSizes
#7      RenderFlex.performLayout
#8      RenderObject.layout
#9      MultiChildLayoutDelegate.layoutChild
#10     _ScaffoldLayout.performLayout
#11     MultiChildLayoutDelegate._callPerformLayout
#12     RenderCustomMultiChildLayoutBox.performLayout
#13     RenderObject.layout
#14     RenderProxyBoxMixin.performLayout
#15     RenderObject.layout
#16     RenderProxyBoxMixin.performLayout
#17     _RenderCustomClip.performLayout
#18     RenderObject.layout
#19     RenderProxyBoxMixin.performLayout
#20     RenderObject.layout
#21     RenderProxyBoxMixin.performLayout
#22     RenderObject.layout
#23     RenderProxyBoxMixin.performLayout
#24     RenderObject.layout
#25     ChildLayoutHelper.layoutChild
#26     RenderStack._computeSize
#27     RenderStack.performLayout
#28     RenderObject.layout
#29     RenderProxyBoxMixin.performLayout
#30     RenderObject.layout
#31     RenderProxyBoxMixin.performLayout
#32     RenderObject.layout
#33     RenderProxyBoxMixin.performLayout
#34     RenderObject.layout
#35     RenderProxyBoxMixin.performLayout
#36     RenderObject.layout
#37     RenderProxyBoxMixin.performLayout
#38     RenderObject.layout
#39     RenderProxyBoxMixin.performLayout
#40     RenderObject.layout
#41     RenderProxyBoxMixin.performLayout
#42     RenderOffstage.performLayout
#43     RenderObject.layout
#44     RenderProxyBoxMixin.performLayout
#45     RenderObject.layout
#46     _RenderTheatre.performLayout
#47     RenderObject.layout
#48     RenderProxyBoxMixin.performLayout
#49     RenderObject.layout
#50     RenderProxyBoxMixin.performLayout
#51     RenderObject.layout
#52     RenderProxyBoxMixin.performLayout
#53     RenderObject.layout
#54     RenderProxyBoxMixin.performLayout
#55     RenderObject.layout
#56     RenderProxyBoxMixin.performLayout
#57     RenderObject.layout
#58     RenderProxyBoxMixin.performLayout
#59     RenderObject.layout
#60     RenderProxyBoxMixin.performLayout
#61     RenderObject.layout
#62     RenderView.performLayout
#63     RenderObject._layoutWithoutResize
#64     PipelineOwner.flushLayout
#65     RendererBinding.drawFrame
#66     WidgetsBinding.drawFrame
#67     RendererBinding._handlePersistentFrameCallback
#68     SchedulerBinding._invokeFrameCallback
#69     SchedulerBinding.handleDrawFrame
#70     SchedulerBinding.scheduleWarmUpFrame.<anonymous closure>
(elided 6 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, and dart:async-patch)
The following RenderObject was being processed when the exception was fired: RenderStack#9f989 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderStack#9f989 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: offset=Offset(362.0, 0.0); flex=null; fit=null (can use size)
    constraints: BoxConstraints(0.0<=w<=768.0, 0.0<=h<=Infinity)
    size: Size(44.0, 17.0)
    alignment: AlignmentDirectional.topStart
    textDirection: ltr
    fit: loose
    child 1: RenderParagraph#bfe70 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: top=1.0; offset=Offset(0.0, 0.0) (can use size)
        constraints: BoxConstraints(0.0<=w<=768.0, 0.0<=h<=Infinity)
        size: Size(44.0, 17.0)
        textAlign: start
        textDirection: ltr
        softWrap: wrapping at box width
        overflow: clip
        locale: en_US
        maxLines: unlimited
        text: TextSpan
            debugLabel: (englishLike bodyMedium 2014).merge(blackCupertino bodyMedium)
            inherit: false
            color: Color(0xdd000000)
            family: .SF UI Text
            size: 14.0
            weight: 400
            baseline: alphabetic
            decoration: TextDecoration.none
            "Cicle 1"
════════════════════════════════════════════════════════════════════════════════
Reloaded 1 of 585 libraries in 479ms.

Screen structure:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        shape: const Border(
            bottom: BorderSide(color: Color(0XFFA9A9AD), width: 0.5)),
        automaticallyImplyLeading: false,
        shadowColor: Colors.transparent,
        backgroundColor: const Color(0XFFF4F4F5),
        title: const Text('Login',
            style: TextStyle(color: Colors.black, fontSize: 18)),
      ),
      body: Column(
        children: [
          Stack(
            children: [Positioned(top: 1, child: Text('Cicle 1'))], // here makes error
          ),
        ]
      )

CodePudding user response：

To use Stack widget, you need to wrap it sized-widget like SizedBox,Being wrapped with Column It is getting infinite height.

You can directly use Stack on body

body: Stack(
  children: [
    Positioned(
      top: 1,
      child: Text('Cicle 1'),
    )
  ], 
),

Or wrapped with SizedBox and provide height.