CODEWITHSUNDEEP
flutterdartmarkdownflutter-layoutflutter-sliver
John Pandian
John Pandian

Reputation: 1

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

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.

Upvotes: 0

Views: 1238

Answers (3)

Gagan Yadav
Gagan Yadav

Reputation: 141

You can use MarkdownBody widget which renders a non-scrolling widget that parses and displays Markdown and use that in any scrolling widgets to add more items.

ListView(
  children: [
    // your widgets

    MarkdownBody(
      data: mdString,
    ),

    // your widgets
  ],
),

Upvotes: 0

Yayo Arellano
Yayo Arellano

Reputation: 3866

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

Upvotes: 3

Brian Ogden
Brian Ogden

Reputation: 19232

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

Upvotes: 0

Related Questions