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:
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.
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.
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.
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:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With