Texts visibly stacked on each other in flutter-CodePudding

Widget build(BuildContext context) {
return Swipable(
  child: Column(
    children: [
      Container(
        height: MediaQuery.of(context).size.height * 0.57,
        child: Card(
          elevation: 2,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(14),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(14),
              child: Image.network(
                widget.urls,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
      Center(
        child: Expanded(
            child: Text(
          widget.usernames,
          maxLines: 1,
        )),
      )
    ],
  ),
  //onSwipeLeft: () => _returnString(index),
 );
}
}

This is my code and i've been adjusting and readjusting for over 3hrs.. I just need the text to show on the image that can be swiped. Please help me. Thanks

image link [1]: https://i.stack.imgur.com/ACUlF.jpg

CodePudding user response：

Hello I think what you are needing is to use a Stack Widget instead of a Column widget. When using Stacks you can use a Positioned widget to indicate exactly where you want your child widgets to be displayed inside of the stack as well.

Widget build(BuildContext context) {
  return Swipable(
    child: Stack(
    alignment: Alignment.center,
      children: [
        Container(
          height: MediaQuery.of(context).size.height * 0.57,
          child: Card(
            elevation: 2,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(14),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(14),
                child: Image.network(
                  widget.urls,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ),
        Positioned(
          top: 16,
          right: 16,
          child: Center(
            child: Expanded(
                child: Text(
              widget.usernames,
              maxLines: 1,
            )),
          ),
        )
      ],
    ),
    //onSwipeLeft: () => _returnString(index),
  );
 }
}

Happy Coding!

CodePudding user response：

You can use this way

Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
            widget.urls,
              fit: BoxFit.cover,
            ),
          ),
          height: MediaQuery.of(context).size.height * 0.57,
          width: MediaQuery.of(context).size.height,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Text(
          widget.usernames,
              style: TextStyle(color: Colors.orange),
            ),
          ),
        ),
      ],
    );
    //onSwipeLeft: () => _returnString(index),
  }