I just created a new flutter project and started organized my folders, this is what I have for now:
I'm trying to run it on Windows since I'll use Flutter Desktop for this project, and when I hit run it builds and runs just fine, but when I do a hot-reload the application throws this error message:
No constructor 'MaterialApp.' with matching arguments declared in class 'MaterialApp'.
Receiver: MaterialApp
Tried calling: new MaterialApp.()
Found: new MaterialApp.({Key? key, GlobalKey<NavigatorState>? navigatorKey, GlobalKey<ScaffoldMessengerState>? scaffoldMessengerKey, Widget? home, Map<String, (BuildContext) => Widget> routes, String? initialRoute, ((RouteSettings) => Route<dynamic>?)? onGenerateRoute, ((String) => List<Route<dynamic>>)? onGenerateInitialRoutes, ((RouteSettings) => Route<dynamic>?)? onUnknownRoute, List<NavigatorObserver> navigatorObservers, ((BuildContext, Widget?) => Widget)? builder, String title, ((BuildContext) => String)? onGenerateTitle, Color? color, ThemeData? theme, ThemeData? darkTheme, ThemeData? highContrastTheme, ThemeData? highContrastDarkTheme, ThemeMode? themeMode, Locale? locale, Iterable<LocalizationsDelegate<dynamic>>? localizationsDelegates, ((List<Locale>?, Iterable<Locale>) => Locale?)? localeListResolutionCallback, ((Locale?, Iterable<Locale>) => Locale?)? localeResolutionCallback, Iterable<Locale> supportedLocales, bool debugShowMaterialGrid, bool showPerformanceOverlay, bool checkerboardRasterCacheImages, bool checkerboardOffscreenLayers, bool showSemanticsDebugger, bool debugShowCheckedModeBanner, Map<LogicalKeySet, Intent>? shortcuts, Map<Type, Action<Intent>>? actions, String? restorationScopeId}) => MaterialApp
This is the content of my main.dart:
import 'package:flutter/material.dart';
import 'package:beryllium/src/screens/HomeScreen.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Beryllium',
initialRoute: '/',
routes: {
'/': (contex) => HomeScreen(), //Home screen widget
},
);
}
}
And this the content of the HomeScreen.dart file:
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key key}) : super(key: key);
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return new _HomeScreen();
}
}
class _HomeScreen extends StatelessWidget {
const _HomeScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Book'),
),
body: Center(
child: Container(
child: Text('Home Screen'),
),
));
}
}
If someone has any idea about avoiding this error, please give me a hand.
Thanks in advance.
Related
I try to use Polymorphism with the Provider package in Dart/Flutter, but I'm not sure if it is possible or not and if I have made a mistake.
I have two provider class "Provider1" and "Provider2" which extend an abstract class "AbstactProvider", I have a widget "WidgetProvider1Or2"
which need to interact with Provider1 Or Provider2 but flutter throw me a "ProviderNotFoundException".
thanks for yours help!
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bloc_concept/cubit/counter_cubit.dart';
import 'package:provider/provider.dart';
abstract class AbstactProvider extends ChangeNotifier {
void printName();
}
class Provider1 extends AbstactProvider {
#override
void printName() {
print("Provider1");
}
}
class Provider2 extends AbstactProvider {
#override
void printName() {
print("Provider2");
}
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => CounterCubit(),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
Widget widgetProvider1 = ChangeNotifierProvider(
create: (_) => Provider1(),
child: WidgetProvider1(),
);
Widget widgetProvider2 = ChangeNotifierProvider(
create: (_) => Provider2(),
child: WidgetProvider2(),
);
Widget widgetProvider1Or2 = ChangeNotifierProvider(
create: (_) => Provider1(),
child: WidgetProvider1Or2(),
);
return Scaffold(
body: Column(
children: [widgetProvider1, widgetProvider2, widgetProvider1Or2],
),
);
}
}
class WidgetProvider1 extends StatelessWidget {
const WidgetProvider1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
context.watch<Provider1>();
return Container();
}
}
class WidgetProvider2 extends StatelessWidget {
const WidgetProvider2({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
context.watch<Provider2>();
return Container();
}
}
class WidgetProvider1Or2 extends StatelessWidget {
const WidgetProvider1Or2({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
context.watch<AbstactProvider>();
return Container();
}
}
I'm using MultiProvider in my home page on flutter app and work done.
But I have a custom App bar which contain a ChangeNotifierProvider with a consumer and not working. AppBar widget are not notify when notifyListener() function called.
home view:
/// Home screen.
class HomeScreen extends StatefulWidget {
/// Constructor
const HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final _homeViewModel = HomeViewModel();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const CustomAppBar(),
body: MultiProvider(
providers: [
ChangeNotifierProvider.value(value: _homeViewModel),
ChangeNotifierProxyProvider<HomeViewModel, SecondViewModel>(
create: (context) => SecondViewModel(),
update: (context, homeViewModel, secondViewModel) =>
secondViewModel!..load()),
],
child: Container()
}
}
app bar view:
/// Custom App Bar.
class CustomDropAppBar extends cs.AppBar {
/// Title.
final Widget? appBarTitle;
/// Constructor.
const CustomDropAppBar(
{Key? key,
this.appBarTitle,})
: super(key: key);
#override
State<CustomMenuAppBar> createState() => _CustomMenuAppBarState();
}
/// App bar state.
class _CustomMenuAppBarState extends State<CustomMenuAppBar> {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => CustomMenuViewModel(),
child: Consumer<CustomMenuViewModel>(
builder: (context, viewModel, child) => cs.AppBar(
title: widget.appBarTitle,
actions: [Container()])));
}
I think it's because I'm using MultiProvider in the body Scalford function? or it's because AppBar cannot containing consumer?
How I can fix this problem?
I'm new to flutter and I made my main.dart route to my splashscreen. In my main.dart, it accepted the name splashscreen() but in my splashscreen.dart it kept flagging the error "Name types using UpperCamelCase" when I named my class splashscreen.
Here is my main.dart
import 'package:flutter/material.dart';
import 'Routes/splashscreen.dart';
void main (){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp ({Key? key}) : super(key: key)
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "DoyarPay",
home: splashscreen(),
);
}
}
Here is my splashscreen.dart
import 'package:flutter/material.dart';
class splashscreen extends StatefulWidget {
const splashscreen({ Key? key }) : super(key: key);
#override
_splashscreenState createState() => _splashscreenState();
}
class _splashscreenState extends State<splashscreen> {
#override
Widget build(BuildContext context) {
return Container(
);
}
}
On the splashscreen.dart it gives the "Name types using UpperCamelCase" error.
Can anyone help me out on this.
Thanks
It is "accepted" but the warning indicates that you should follow some specific naming conventions. You should definetely check here which has more details about Effective Dart.
Widgets always start with uppercase letter so change your splashscreen to Splashscreen, not only widgets but classes as well
import 'package:flutter/material.dart';
import 'Routes/splashscreen.dart';
void main (){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp ({Key? key}) : super(key: key)
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "DoyarPay",
home: Splashscreen(),
);
}
}
And your splashscreen.dart
import 'package:flutter/material.dart';
class Splashscreen extends StatefulWidget {
const Splashscreen({ Key? key }) : super(key: key);
#override
_SplashscreenState createState() => _SplashscreenState();
}
class _SplashscreenState extends State<Splashscreen> {
#override
Widget build(BuildContext context) {
return Container(
);
}
}
Classes in dart has to be in UpperCamelCase.
Probably the linter doesn't detect the "error" (is not an error, you are just violating a convention) in your main.dart but it does during class declaration.
To follow dart standards just change the code using UpperCamelCase consistently:
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "DoyarPay",
home: SplashScreen(),
);
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
const SplashScreen({ Key? key }) : super(key: key);
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
Widget build(BuildContext context) {
return Container(
);
}
}
For class name in dart, suggest using CamelCase means it will start with an uppercase letter and the next word's 1st letter will be uppercase as well.
In your case splashscreen which starts with s which is lowercase. Appropriate will be SplashScreen.
For file name, we use snake_case. In this case splashscreen.dart will be splash_screen.dart
Learn more about
effective-dart
Camel case vs. snake case
I found that Flutter App has slightly hard shadows than the Native App when pushing a new screen.
I searched on the internet and I didn't find much about this. Is there any way to remove that shadow?
Flutter doctor
Full reproducible code
File: main.dart
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return CupertinoApp(
initialRoute: '/',
onGenerateRoute: generateRoute,
home: Home(),
);
}
}
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Center(child: CupertinoButton(child: Text('Navigate'), onPressed: () => Navigator.pushNamed(context, 'details'))),
);
}
}
class Details extends StatefulWidget {
Details({Key key}) : super(key: key);
#override
_DetailsState createState() => _DetailsState();
}
class _DetailsState extends State<Details> {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Center(child: Text('Details')),
);
}
}
Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case '/':
return CupertinoPageRoute(builder: (context) => Home());
case 'details':
return CupertinoPageRoute(builder: (context) => Details());
default:
return CupertinoPageRoute(builder: (context) => Home());
}
}
I'm new in Flutter and Dart and found a new "async_redux" package in https://pub.dev/packages/async_redux to develop my project easier way than traditional "redux" package. In readme document there is a short description about implement Route Navigation but I always receive:
"type 'NavigateAction' is not a subtype of type 'ReduxAction' of 'action'"
when i use -dispatch(NavigateAction.pushNamed("MyRoute"))- in "onChangePage".
Here the structure code:
Store<AppState> store;
final navigatorKey = GlobalKey<NavigatorState>();
void main() async{
NavigateAction.setNavigatorKey(navigatorKey);
var state = AppState.initialState();
store = Store<AppState>(initialState: state);
runApp(MyApp());
}
final routes={
'/': (BuildContext context) => First(),
"/myRoute": (BuildContext context) => Two(),
};
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return StoreProvider<AppState>(
store: store,
child: MaterialApp(
routes: routes,
navigatorKey: navigatorKey,
),
);
}
}
class AppState {
AppState(...);
AppState copy(...) =>
AppState(
...
);
static AppState initialState() => AppState(
...
);
#override
bool operator ==(Object other) => ...
#override
int get hashCode => ...;
}
class First extends StatelessWidget {
#override
Widget build(BuildContext context) => MyHomePageConnector();
}
class MyHomePageConnector extends StatelessWidget {
MyHomePageConnector({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return StoreConnector<AppState, ViewModel>(
model: ViewModel(),
builder: (BuildContext context, ViewModel vm) => MyHomePage(
onChangePage: vm.onChangePage
),
);
}
}
class ViewModel extends BaseModel<AppState> {
ViewModel()
VoidCallback onChangePage;
ViewModel.build({
#required this.onChangePage,
}) : super(equals: []);
#override
ViewModel fromStore() => ViewModel.build(
onChangePage: () => dispatch (NavigateAction.pushNamed ("/myRoute"))
);
}
class MyHomePage extends StatefulWidget {
final VoidCallback onChangePage;
MyHomePage({
Key key,
this.onChangePage
}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return RaisedButton(
child: Icon(Icons.add_circle),
onPressed: widget.onChangePage
),
);
}
}
How and where implement "dispatch(NavigateAction.pushNamed ("/myRoute"))"?
Try this:
dispatch(NavigateAction<AppState>.pushNamed("/myRoute"))"
Update:
With recent async_redux: ^1.2.0 you don't need the <AppState> anymore, and can dispatch it like this:
dispatch(NavigateAction.pushNamed("/myRoute"))"