The named parameter 'home' isn't defined - Flutter
Answer a question I am facing an issue in my Flutter project. When I try calling 'home'-statement in the scaffold, it throws an error stating The named parameter 'home' isn't defined. I have tried a l
Answer a question
I am facing an issue in my Flutter project. When I try calling 'home'-statement in the scaffold, it throws an error stating The named parameter 'home' isn't defined
. I have tried a lot around, but I didn't found any solution to this issue.
Also, I have recently started working on Flutter and this is my first project. So please guide me through the correct approach as I am in the learning phase of the Flutter experience. Thanks in advance.
Files Structure:
lib/
---components/
------appScaffold.dart
---pages/
------home.dart
main.dart
I have implemented the code as below :-
main.dart
import 'package:flutter/material.dart';
import 'package:project/pages/home.dart';
import 'package:project/components/appScaffold.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AppScaffold(
home: HomePage(), //!Here's the problemt with 'home'
);
}
}
home.dart
import 'package:project/main.dart';
import 'package:flutter/material.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int currentPageIndex = 0;
void changePage(int newPageIndex) {
setState(() {
currentPageIndex = newPageIndex;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
backgroundColor: Colors.red,
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: BubbleBottomBar(
opacity: .2,
currentIndex: currentPageIndex,
onTap: changePage,
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
elevation: 8,
fabLocation: BubbleBottomBarFabLocation.end, //new
hasNotch: true, //new
hasInk: true, //new, gives a cute ink effect
inkColor: Colors.black12, //optional, uses theme color if not specified
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
//Home
backgroundColor: Colors.red,
icon: Icon(
Icons.home,
color: Colors.black,
),
activeIcon: Icon(
Icons.home,
color: Colors.red,
),
title: Text("text")),
BubbleBottomBarItem(
backgroundColor: Colors.deepPurple,
icon: Icon(
Icons.menu,
color: Colors.black,
),
activeIcon: Icon(
Icons.menu,
color: Colors.deepPurple,
),
title: Text("text")),
BubbleBottomBarItem(
//Icon3
backgroundColor: Colors.indigo,
icon: Icon(
Icons.menu,
color: Colors.black,
),
activeIcon: Icon(
Icons.menu,
color: Colors.indigo,
),
title: Text("text")),
BubbleBottomBarItem(
//Icon 4
backgroundColor: Colors.green,
icon: Icon(
Icons.menu,
color: Colors.black,
),
activeIcon: Icon(
Icons.menu,
color: Colors.green,
),
title: Text("text"))
],
),
);
}
}
appScaffold.dart
import 'package:flutter/material.dart';
import 'package:project/main.dart';
import 'package:project/pages/home.dart';
class AppScaffold extends StatelessWidget {
AppScaffold(this.home);
final Widget home;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MoneyTracker',
theme: ThemeData(
primarySwatch: Colors.indigo,
primaryColor: Colors.indigo,
secondaryHeaderColor: Colors.indigo,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: home,
);
}
}
Answers
The problem is the constructor in your AppScaffold
class. When you want to name an argument you have to put it into curly braces. This would then look like:
import 'package:flutter/material.dart';
import 'package:project/main.dart';
import 'package:project/pages/home.dart';
class AppScaffold extends StatelessWidget {
AppScaffold({this.home});
final Widget home;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MoneyTracker',
theme: ThemeData(
primarySwatch: Colors.indigo,
primaryColor: Colors.indigo,
secondaryHeaderColor: Colors.indigo,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: home,
);
}
}
When you want to create a constructor with both, named and positional arguments. It would look like:
MyClass(this.positional, {this.named, this.alsoNamed});
Here you can read more about Named Arguments in dart.
所有评论(0)