Flutter DrawerHeader Text Overflow - flutter

Question

I have this issue with my Flutter UI. I'm trying to make my text break when it's too long, but the overflow ellipsis doesn't work. Can you help me please?
issue picture:
this is what i'm looking for:
My code:
static Drawer myDrawer (BuildContext context, String mode, String businessName) {
return Drawer(
child: Container(
child: ListView(
padding: EdgeInsets.only(top:0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: CustomPaint(
painter: DrawerHeaderPaint(),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40,
image: AssetImage('assets/logo.png')
),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25
),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
],
),
)
],
),
],
),
),
),
SizedBox(height: 40),
menuOptions(),
],
)
],
),
)
);
}

Answer 1

Try wrapping Business Info Column with Expanded widget and also wrap Text widget after apartment icon with Expanded widget, like so:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25,
), //TextStyle
), //Text
Container(
color: Colors.red,
child: Row(
children: const [
Icon(Icons.apartment, color: Color(0xff263d67)),
Expanded(
child: Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
), //TextStyle
), //Text
), //Expanded
],
), //Row
), //Container
],
), //Column
), //Expand

Answer 2

Use a Expanded or Flexible
Expanded(
child:
Text('Business Name tooooo loooooong',...))

Answer 3

//you can use the SizedBox widget and specify your text width it helps to ellipsis the text. Hope this code will help you.Thanks
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Dermo extends StatefulWidget {
const Dermo({Key? key}) : super(key: key);
#override
_DermoState createState() => _DermoState();
}
class _DermoState extends State<Dermo> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
)
,
drawer: Drawer(
backgroundColor: Colors.green,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40, image: AssetImage('assets/logo.png')),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
///if you want to show complete text use can comment
///out overflow,softWrap and maxLines otherwise you can use all
///these properties it ellipsis the text
SizedBox(
width: 160,
child: Text(
'Business Name tooooo loooooong',
/* overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,*/
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
),
],
),
)
],
),
],
),
),
SizedBox(height: 40),
],
)
],
),
)));
}
}