Блог

Я столкнулся с проблемой в моем проекте Flutter. Когда я пытаюсь вызвать ‘home’-statement в каркасе, он выдает ошибку с указанием The named parameter 'home' isn't defined . Я много чего перепробовал, но не нашел никакого решения этой проблемы.

Кроме того, я недавно начал работать над Flutter, и это мой первый проект. Поэтому, пожалуйста, подскажите мне правильный подход, поскольку я нахожусь на этапе обучения работе с Flutter. Заранее спасибо.

Структура файлов:

  lib/
 ---components/
 ------appScaffold.dart
 ---pages/
 ------home.dart 
 main.dart
  

Я реализовал приведенный ниже код :-

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,
    );
  }
}
  

Проблема заключается в конструкторе в вашем AppScaffold классе. Когда вы хотите присвоить имя аргументу, вы должны заключить его в фигурные скобки. Тогда это выглядело бы как:

 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,
    );
  }
}
  

Когда вы хотите создать конструктор как с именованными, так и с позиционными аргументами. Это выглядело бы как:

 MyClass(this.positional, {this.named, this.alsoNamed});
  

Здесь вы можете прочитать больше об именованных аргументах в dart.