8

I'm trying to create a Material design app without the Scaffold element: Here is the purely default app:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(widget.title);
  }
}

The result is:

screenshot

How to fix that and use material styles without Scaffold?

Answer:

I need to use the Material widget. As a very beginner in Flutter I had read Material design tutorials and all of them were using the Scaffold widget. Thanks for pointing out the Material widget in comments.

4
  • 2
    Why not use scaffold? scaffold is a material widget and makes our lives a lot easier. A LOT easier. If you really really don't want to use scaffold, then use the Material widget. Nov 3, 2019 at 9:18
  • if you want your primarySwatch: Colors.blue, to take effect you have to use Scaffold - see material/scaffold.dart source file, line ~2111 (in version 1.10.15) where theme is read and then in line 2323 is set Material.color - what is wrong with using "bare" Scaffold?
    – pskink
    Nov 4, 2019 at 6:52
  • I'm confused by the fact that I pass theme data to the application but it has no effect on the widgets placed in it. By the way, thanks for pointing to the Material widget! Nov 4, 2019 at 7:21
  • 1
    your welcome. here github.com/flutter/flutter/blob/master/packages/flutter/lib/src/… you have where Scaffold uses Matarial widget
    – pskink
    Nov 4, 2019 at 8:04

1 Answer 1

13

It will not work without scaffold.

I think you are not getting what scaffold is and how it's behaviour is?

Scaffold is a widget which provides your screen/route a default behaviour similar to your android/ios screens like AppBar, Body, Title, FloatingActionButton, Drawer etc.

So that you do not have to make yourself a new structure.

If you are not using scaffold, then your page will act like a plain body structure in which you have to fill custom widgets as per your requirements.

For ex :

In android, Any Activity will have a default ActionBar. But, if you use NoActionBarActivity then Activity will be displayed without actionBar.

Even Scaffold works in the similar manner.

Updated Method :

@override
  Widget build(BuildContext context) {
    return Material(child: Center(child: Text(widget.title,)),color: Colors.white,);
  }

You need to use Material Widget as a parent to behave the child widgets in the similar manner when using Scaffold.

6
  • Thanks for the answer! I don't want to use Scaffold because I don't need the floating action button and action bar. I can use a SafeArea, for example. But I still need controls styles according to the Material design. I'm confused by the fact that I pass theme data to the App object but it doesn't affet widgets placed in this app, even a simple text box. Nov 4, 2019 at 6:24
  • Can you add your code here so that i can understand what exactly you want to achieve ? Also, I want to tell you is that if you don't want to use properties like floatingactionButton, drawer, appBar then it is fine. they are optional. Just carry on with the widgets you want to use like body, appbar. Otherwise creating a custom scaffold for yourself will waste your time as per my thinking. Still if you want to use a custom Scaffold then refer the Scaffold Widget first to move ahead. Nov 4, 2019 at 6:33
  • The code is in the question. I need to get a white background and standard black text with the Roboto font. When using Scaffold without app bar, it leads to the following issue: stackoverflow.com/questions/50091640/…. I will add some controls later by myself, without using app bar, action bar or floating action buttons. Nov 4, 2019 at 7:13
  • Checkout the updated method. Again, i want to remind you that yellow underline with the black background and text is not an issue. It is just a default behaviour without using widgets with Material behaviour in flutter. As your widgets in your build method are not inside the Material widget in any manner either it is scaffold or anything else then it will be not behave as it will inside material widget. I think this will sort your issue. Nov 4, 2019 at 7:22
  • I didn't know about the Material widget. I've very beginner and all the tutorials I read were using Scaffold. Now I know, thanks! Nov 4, 2019 at 7:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.