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.