How to have additional widgets along with MarkDown in Scaffold body in Flutter?

Question

I'm trying to add additional widgets along with Flutter MarkDown widget in a Scaffold's body.

But I'm getting errors however I try.

      appBar: new AppBar(
        title: new Text(
          widget.drawerItem.title,
        ),
      ),
      drawer: new NavigationDrawerDemo(),
      body: Markdown(data: Constants.someText),
    );

The above code works well. I want to add additional widgets to the page. But nothing works.

score 2 · Answer 1 · answered Jan 23 '22 at 03:03

Given that Markdown returns a list we have to set shrinkWrap and physics.

SingleChildScrollView(
 child: Column(
   children: [
     Container(
       height: 100,
       color: Colors.red,
     ),
     Markdown(
       data: markDownTextHere,
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
     ),
   ],
 ),
);

score 0 · Answer 2 · answered Jul 16 '19 at 19:08

Seems you will need to use layout Widgets like Column to vertically add Widgets and/or a Row to horizontally add widgets, here is some example code:

import 'package:flutter/material.dart';
import 'package:hybrid/@core/constants/nav_bar_index.dart';
import 'package:hybrid/@core/ui-components/logo_container.dart';
import 'package:hybrid/@core/util/auth_util.dart';
import 'package:hybrid/@core/util/ui_util.dart';
import 'package:hybrid/screens/shared/app_bar.dart';
import 'package:hybrid/screens/shared/nav_bar.dart';
import 'package:hybrid/screens/signup/start.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _isLoggedInResult;

  @override
  void initState() {
    super.initState();
    AuthUtil.isSignedIn().then((result) {
      setState(() {
        _isLoggedInResult = result;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoggedInResult == null) {
      return Container();
    }

    if (!_isLoggedInResult) {
      return Start();
    }

    return _buildScaffold();
  }

  Widget _buildScaffold() {
    return Scaffold(
      appBar: BmsAppBar(),
      body: _buildBody(),
      bottomNavigationBar: NavBar(index: NavBarIndex.Home),
    );
  }

  Widget _buildBody() {
    return Stack(
      children: <Widget>[
        Container(
          decoration: UIUtil.getDecorationBg(),
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LogoContainer(),
             SizedBox(
              height: 20,
            ),
          ],
        ),
      ],
    );
  }
}

I'm getting errors when I try to use Column. Widgets overlap if I use Stack. — John Pandian, Jul 17 '19 at 17:52
That is simply your unfamiliarity with using those layout widgets. It does solve your question, that is how you go about adding additional widgets. — Brian Ogden, Jul 18 '19 at 18:04
Markdown returns a ListView, due to which I'm unable to add additional widgets. — John Pandian, Jul 19 '19 at 15:03

How to have additional widgets along with MarkDown in Scaffold body in Flutter?

2 Answers2