CODEWITHSUNDEEP
flutterdartflutter-layout
aytunch
aytunch

Reputation: 1444

Flutter: Vertical Text widget

I looked up here and pub.dev and flutter docs but could not find(or could not word my query) any solution for this simple task.

I want to display a String with its letters going from up to down while keeping the letter orientations default. So a rotated Text() would not work.

My desired outcome is this:

H
E
L   T
L   H
O   A
    N
W   K
O   S
R   ❤️
L
D

Also, I would need to wrap the String to the next line(column in this case) A height parameter is necessary to limit the number of letters from top to down for each column.

If this last part is too hard to implement, I am open to ideas for the single column solution.

Upvotes: 6

Views: 3573

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 268454

Screenshot:

enter image description here

Code:

// Create a custom widget like this
class MyVerticalText extends StatelessWidget {
  final String text;

  const MyVerticalText(this.text);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      runSpacing: 30,
      direction: Axis.vertical,
      alignment: WrapAlignment.center,
      children: text.split("").map((string) => Text(string, style: TextStyle(fontSize: 22))).toList(),
    );
  }
}

And use it like:

MyVerticalText("HELLO WORLD THANKS❤️")

Upvotes: 8

Related Questions