skip to Main Content

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

3

Answers


  1. 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. FractionallySizedBox(
      widthFactor: 0.7,
      heightFactor: 0.25,
      child: Container(
        color: Colors.amber,
      ),
    )
    

    enter image description here

    Login or Signup to reply.
  3. 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