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

put a transparent container on top of the text – Futter – Flutter

i have feature like this
enter image description here

i confuse how to create this on flutter, how do I make the text look like the image above, is there a container above it, if so, how do I validate it if I want to display the container if the text exceeds 5 lines

Tags:

3

Answers


  1. 0

    try to stack it with container and create a gradient with 2 colors ( white and transparent.

    Stack(
children : [
..your widget
if(!expand) // if not expand
   Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.top,
          end: Alignment.bottom,
          colors: [Colors.white, Colors.yellow],
        ),
      ),
    )
]
    Login or Signup to reply.
  2. 0

    this will useful.

         Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
          // shadow Container with text first data
            Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(width: 1.0, color: Colors.red),
                ),
                gradient: LinearGradient(
                  begin: const Alignment(0.0, -1),
                  end: const Alignment(0.0, 1),
                  colors: <Color>[
                    const Color(0xffFFFFFF),
                    const Color(0xff1A1717),
                  ],
                ),
              ),
              child: Center(
                  child: Text(
                      "i confuse how to create this on flutter, how do I make the text look like the image above, is there a container above it, if so, how do I validate it if I want to display the container if the text exceeds 5 lines",
                      style: TextStyle(fontSize: 20))),
            ),
            // secound Data
            const Text(
              '|| See more',
            ),
          ],
        ),

    enter image description here

    Login or Signup to reply.
  3. 0

    If you don’t want to use containers and you want this
    you can use:

    Text( style: TextStyle( overflow: TextOverFlow.fade)

    Try this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search