Home > Software design >  How to wrap text for android app in flutter
How to wrap text for android app in flutter

Time:10-14

I am developing android app using flutter and In my application trying to warp the text to next line but it is not working. In my app mail id is not wrapping. It is coming in the straight line. But i want to wrap the text in the next line. So, How to show the wrap text(mail id) in the next line in the flutter.

If anyone knows the answer please help to find the solution.

 Widget build(BuildContext context)
 {
 return Drawer(
  child: ListView(
    children: [
      //drawer header
      Container(
        height: 165,
        color: Colors.amber,
        child: DrawerHeader(
          decoration:  BoxDecoration(color: Color(0xFFF5F1F1)),
          child: Row(
            children: [
              const Icon(
                Icons.person,
                size: 50,
                color: Colors.black,
              ),

              const SizedBox(width: 16,),

              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Name",
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    softWrap: false,
                    style: const TextStyle(fontSize: 16,color: Colors.black,fontWeight: FontWeight.bold,),
                  ),
                  const SizedBox(height: 10,),
                  Text(
                    "[email protected]",
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    softWrap: true,
                    style: const TextStyle(
                      fontSize: 12,
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),

      const  SizedBox(height: 12.0,),

      //drawer body
      GestureDetector(
        onTap: ()
        {
          Navigator.push(context, MaterialPageRoute(builder: (c)=> TripsHistoryScreen()));
        },
        child: const ListTile(
          leading: Icon(Icons.history, color: Colors.black,),
          title: Text(
            "History",
            style: TextStyle(
              color: Colors.black
            ),
          ),
        ),
      ),

      GestureDetector(
        onTap: ()
        {
          Navigator.push(context, MaterialPageRoute(builder: (c)=> ProfileScreen()));
        },
        child: const ListTile(
          leading: Icon(Icons.person, color: Colors.black,),
          title: Text(
            "Visit Profile",
            style: TextStyle(
                color: Colors.black
            ),
          ),
        ),
      ) 

    ],
  ),
);
}

CodePudding user response:

Wrap the Text widget with SizedBox with fixed width.


SizedBox(
                 width: 200,
                 child:Text(
                 "[email protected]",
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    softWrap: true,
                    style: const TextStyle(
                      fontSize: 12,
                      color: Colors.black,
                    ),
                  ),
),

  • Related