Search code examples
flutterflutter-layoutflutter-dependenciesflutter-widgetflutter-packages

How can I use markdown package (For text with bullet point) inside the ListView Widget? Nothing show when use it inside ListView


This is my code. I want to use the MarkDown widget inside the ListView widget. But when I using nothing to show on the page. Without ListView/Column it working properly. But, I need to use it inside the ListView Widget. I want something like the below picture. Thank You.

 class SettingsAccountDeleteMyAccount extends StatefulWidget {
  @override
  _SettingsAccountDeleteMyAccountState createState() => _SettingsAccountDeleteMyAccountState();
}

    class _SettingsAccountDeleteMyAccountState extends State<SettingsAccountDeleteMyAccount> {
  final testData = ["Flutter", "Dart", "Mobile Application", "Andriod Studio"];

    @override
  Widget build(BuildContext context) {
   final _markDownData = testData.map((x) => "- $x\n").reduce((x,
        y) => "$x$y");

    return Scaffold(
      appBar: AppBar(
        title: Text('Delete my account'),
      ),
    body: ListView(
        padding: EdgeInsets.only(top: 20.0, left: 15.0, right: 10.0, bottom: 10.0),
        children: <Widget>[
          ListTile(
            leading: Icon(
              Icons.error,
              color: Colors.red,
            ),
            title: Text(
              'Deleting your account will:',
              style: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.bold,
                letterSpacing: 0.3,
              ),
            ),
          ),
          Markdown(
            data: _markDownData,
          ),
        ],
      ),
    );
  }
}      

Solution

  • You can copy paste run full code below
    You can wrap Markdown with Container and provide height because you use ListView
    code snippet

    Container(
                height: 200,
                child: Markdown(
                  data: _markDownData,
                ),
              ),
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    import 'package:flutter_markdown/flutter_markdown.dart';
    
    class SettingsAccountDeleteMyAccount extends StatefulWidget {
      @override
      _SettingsAccountDeleteMyAccountState createState() =>
          _SettingsAccountDeleteMyAccountState();
    }
    
    class _SettingsAccountDeleteMyAccountState
        extends State<SettingsAccountDeleteMyAccount> {
      final testData = ["Flutter", "Dart", "Mobile Application", "Andriod Studio"];
    
      @override
      Widget build(BuildContext context) {
        final _markDownData =
            testData.map((x) => "- $x\n").reduce((x, y) => "$x$y");
    
        print(_markDownData);
    
        return Scaffold(
          appBar: AppBar(
            title: Text('Delete my account'),
          ),
          body: ListView(
            padding:
                EdgeInsets.only(top: 20.0, left: 15.0, right: 10.0, bottom: 10.0),
            children: <Widget>[
              ListTile(
                leading: Icon(
                  Icons.error,
                  color: Colors.red,
                ),
                title: Text(
                  'Deleting your account will:',
                  style: TextStyle(
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 0.3,
                  ),
                ),
              ),
              Container(
                height: 200,
                child: Markdown(
                  data: _markDownData,
                ),
              ),
            ],
          ),
        );
      }
    }
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: SettingsAccountDeleteMyAccount(),
        );
      }
    }