Question 76772 in Flutter Question posted in
The official Flutter documentation can be found here.

how can i give percentage height in stack with respect to other children in flutter stack widget

here is my code

Scaffold(
        // backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: const Text("Live Shows"),
        ),
        body: MasonryGridView.builder(
          physics: const BouncingScrollPhysics(),
          gridDelegate: const SliverSimpleGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          mainAxisSpacing: 7,
          crossAxisSpacing: 7,
          itemCount: urs.length,
          itemBuilder: ((context, index) {
            return Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(
                    color: ColorsItems().color3,
                    width: 1,
                  )),
              child: Stack(children: [
                Positioned(
                    child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: CachedNetworkImage(
                    imageUrl: urs[index],
                    imageBuilder: (context, imageProvider) =>
                        Image(image: imageProvider),
                  ),
                )),
//Container 2
                Positioned.fromRelativeRect(
                    rect: RelativeRect.fromLTRB(2, 30, 4, 3),
                    child: Container(
                      color: Colors.black,
                    ))
              ]),
            );
          }),
        ));

I want to to set height and width of container 2 as like 30 percent of the height of the upper widget and same width as upper widget has

is there any way to do this
thanks in a advance

Tags:

3

Answers


  1. 0

    You can use FractionallySizedBox .

    Positioned.fill(
  child: FractionallySizedBox(
      heightFactor: .3,//your value    
      widthFactor: 1,
      alignment: Alignment.bottomCenter,
      child: Container(
        color: Colors.black,
        child:
      )),
),
    Login or Signup to reply.
  2. 0 
    FractionallySizedBox(
  widthFactor: 0.7,
  heightFactor: 0.25,
  child: Container(
    color: Colors.amber,
  ),
)

    enter image description here

    Login or Signup to reply.
  3. 0

    You can set flex as 3 of the 1st Container and 2nd Container flex as 1 so you will achieve height of 2nd Container as 30 percent of height of 1st Container , here is an example code

    Stack(
        fit: StackFit.expand,
        children: [
          Column(
            children: [
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.black,
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.green,
                ),
              ),
            ],
          )
        ],
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search