Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material App styles doesn't work without Scaffold

Tags:

flutter

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.

like image 568
Alexander Pravdin Avatar asked Nov 03 '19 08:11

Alexander Pravdin


People also ask

What is the difference between materialapp and scaffold?

The Scaffold is designed to be the single top-level container for a MaterialApp although it is not necessary to nest a Scaffold. Also checkout official Flutter doc for MaterialApp and Scaffold.

Can I create a scaffold application without using these two components?

No Scaffold application is complete without using these two as they are the bare minimum widgets that need to be used to create a minimal Material Design. Note: You can create a Scaffold without passing any parameter in the constructor.

What is the materialapp?

A convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper. The MaterialApp configures the top-level Navigator to search for routes in the following order:

What is a material-design app?

An application that uses material design. A convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper.


1 Answers

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.

like image 191
Jay Mungara Avatar answered Nov 15 '22 10:11

Jay Mungara