How to start text from the same line in Wrap Flutter - Photoshop

adnan
April 14, 2021
247 views
4 votes
4 Answers

I want to design a widget with an icon at the start and a long text in the trailing.

when I wrap them in a Row widget, I’m getting the following result as Row does not support multiline:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(Icons.face),
        Text(
          'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          maxLines: 5,
        ),
      ],
    );
  }
}

but when I wrap them in a Wrap widget, I overcome the overflow problem, however, as the Text is a different widget from Icon, it is starting from the second line, as shown below:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Icon(Icons.face),
        Text(
          'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          maxLines: 5,
        ),
      ],
    );
  }
}

how can I achieve a result as the photo that is shown below (clearly photoshopped):

Tags: flutter

Answers

One way is to consider your icon and each word as a list of widget, then Wrap it. So you have to handle a List<Widget> and add first your icon, then split each word :

List<Widget> convertIconTextToWrap(String text){
    // List
    final List<Widget> widgets = new List();
    // Add icon first
    widgets.add(Icon(Icons.face));
    // Split each word and add a Text widget for each. Don't forget to add manually the space avec $e
    widgets.addAll(textTime
        .split(" ")
        .map((e) => Text("$e "))
        .toList());

    // Return a Wrap widget
    return Wrap(
        crossAxisAlignment: WrapCrossAlignment.center, children: widgets);
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return convertIconTextToWrap(
          'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.');
  }
}

use RichText

import 'dart:ui';
import 'dart:ui' as ui show PlaceholderAlignment;

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(appBar: AppBar(), body: MyWidget()),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      maxLines: 5,
      text: TextSpan(children: [
        WidgetSpan(
          alignment: ui.PlaceholderAlignment.middle,
          child: Icon(Icons.face),
        ),
        TextSpan(
          text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          style: TextStyle(color: Colors.black, fontSize: 16),
        ),
      ]),
    );
  }
}

One way you can do this is like so.

class MyWidget extends StatelessWidget {
  final String longText = 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.';

  @override
  Widget build(BuildContext context) {
    return Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      children: [
        Icon(Icons.face),
        ...longText.split(' ').map((word) => Text('$word ')).toList(),
      ],
    );
  }
}

Try to use Text.rich:

Text.rich(
          TextSpan(
            children: [
              WidgetSpan(
                child: Icon(Icons.add),
              ),
              TextSpan(text: 'Hello '),
              TextSpan(
                text: 'bold',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              TextSpan(text: ' world! blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla'),
            ],
          ),
        ),

Please signup or login to give your own answer.

Click here to cancel reply.

How to start text from the same line in Wrap Flutter – Photoshop

Answers