CODEWITHSUNDEEP
flutter
Adnan
Adnan

Reputation: 1293

How to start text from the same line in Wrap Flutter

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,
        ),
      ],
    );
  }
}

1

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,
        ),
      ],
    );
  }
}

2

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

3

Upvotes: 2

Views: 2471

Answers (5)

VeNoM
VeNoM

Reputation: 20

Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
           const Text(" • "),
            Expanded(
               child: Text(e),
                  ),
                ],
             ),

Upvotes: -1

Nagual
Nagual

Reputation: 2088

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),
        ),
      ]),
    );
  }
}

enter image description here

Upvotes: 7

Jim
Jim

Reputation: 7601

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'),
            ],
          ),
        ),

Upvotes: 2

Jigar Patel
Jigar Patel

Reputation: 5423

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(),
      ],
    );
  }
}

Upvotes: 1

BabC
BabC

Reputation: 1084

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.');
  }
}

Upvotes: 0

Related Questions