big text in title and trailing-CodePudding

My code prints device characteristics. But if the text is too long, then the text is displayed ugly(as in the photo 1). I tried to fix it in different ways, but only title changes for me, trailing remains unchanged. Can it be done in this way, if the text is long, then title is displayed in one line, and the next trailing (as in the photo 2)?

  body: SingleChildScrollView(
child: Align(
  alignment: Alignment.topCenter,
  child: Column(
      children: [
        Container(
            constraints: const BoxConstraints(maxWidth: 800),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(5.0),
            ),
              child: Card(
                child: Column(
                  children: [
                    ListTile(
                        title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
                        trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
                    const Divider(color: Colors.black, endIndent: 10, indent: 10),
                    ListTile(
                        title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
                        trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
                    const Divider(color: Colors.black, endIndent: 10, indent: 10),
                    ListTile(
                        title: const Text('Version of OS:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
                        trailing: Text('${device.version_OS} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
                    const Divider(color: Colors.black, endIndent: 10, indent: 10),
                    ],
                ),
              ),
            ),
      ]
          )
    )
)

CodePudding user response：

One option would be to remove trailing from ListTile and use RichText and TextSpan for title like so:

ListTile(
  title: RichText(
    text: TextSpan(
      style: Theme.of(context).textTheme.headline6,
      children: [
        const TextSpan(
          text: 'Version of OS: ',
          style: TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 25,
          ),
        ),
        TextSpan(
          text: '${device.version_OS}',
          style: TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 20,
          ),
        ),
      ],
    ),
  ),
),

CodePudding user response：

Try below code hope its helpful to you.

     Card(
          child: ListTile(
            leading: Text(
              'Version of OS',
              style: TextStyle(
                fontWeight: FontWeight.w400,
                fontSize: 20,
                overflow:TextOverflow.ellipsis,
            ),),
            title: Text('Your version with version 1.0'),
            trailing: Text('Nokia'),
          ),
        ),