CODEWITHSUNDEEP
flutterflutter-layout
Felipe Augusto
Felipe Augusto

Reputation: 8184

How can I justify text with Flutter markdown?

I started using flutter markdown, however I'd like to justify the content, and I couldn't until now.

I tried using a Center and Alignment but didn't work.

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

class OutsideBankHourDescription extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String text =
        "Antecipações em __horários__ bancários acontecem em 1h na média. __Fora do horário bancário__ o saldo estará em sua conta __no dia seguinte.__";

    return Expanded(
      child: Container(
        alignment: Alignment.center,
        child: Markdown(
          styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)),
          data: text,
        ),
      ),
    );
  }
}

Upvotes: 16

Views: 42419

Answers (3)

josiahsrc
josiahsrc

Reputation: 91

This worked for me using MarkdownBody.

MarkdownBody(
  data: data,
  fitContent: false,
  styleSheet: MarkdownStyleSheet(
    textAlign: WrapAlignment.center,
  ),
)

fitContent is misleading, but setting it to false stretches the text to fit the parent. If you're using MarkdownBody in a stretched-width column, this seems to do the trick.

Upvotes: 4

EthanL
EthanL

Reputation: 161

It becomes possible to set up proper text alignment with flutter_markdown.

    var style = MarkdownStyleSheet(
        textAlign: WrapAlignment.center,
        h1Align: WrapAlignment.center,
      );
    Markdown(
        styleSheet: style,
        data: '# header1 is center-aligned\ntext body is also center-aligned'
    );

You can customized your styles with all the other optional parameters provided by MarkdownStyleSheet class.

Upvotes: 15

Maxim Milyutin
Maxim Milyutin

Reputation: 616

It's not available for now to change text alignment in flutter_markdown 0.2.0. You must contact the authors of this plugin to request this feature.

But if you need fast fix, you can add textAlign: TextAlign.center attribute in source code of this file: https://github.com/flutter/flutter_markdown/blob/master/lib/src/builder.dart

Line of code: 345

mergedTexts.add(new RichText(text: mergedSpan, textAlign: TextAlign.center));

Result:

flutter_markdown alignment center

For more elegant way you must clone git repository of this plugin, attach to your project directly and work to add text alignment feature on your own.

Upvotes: 16

Related Questions