Flutter：无法调用提供商<t> .of(context) 来自定义在另一个文件中的 function。 ProviderNotFoundException</t>

Question

I'm new to flutter and I wish to organize my folders in order to write cleaner code. I'm trying to divide my flutter page on three parts:

1. login_view.dart (this view will be rendered as the login view and will call functions defined into login_builder.dart to build each of its widgets)
2. login_builder.dart (contains function definitions called by login_view.dart to build widgets)
3. login_state.dart (for state management)

But when I call Provider.of(context) inside a functiton that is defined into login_builder.dart (out of the login_view.dart widget tree) it always throws ProviderNotFoundException

// login_view.dart

import 'package:discover/ui/views/login/login_builder.dart';
import 'package:discover/ui/views/login/login_state.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<LoginState>(
      create: (context) => LoginState(),
      child: buildLoginForm(context), 
    );
  }
}

// login_builder.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:discover/ui/views/login/login_state.dart';

Widget buildLoginForm(BuildContext context) {
  var loginState = Provider.of<LoginState>(context);
  return Form(
    child: Column(
      children: <Widget>[
        TextFormField(
          onChanged: (value) => loginState.userName = value,
        )
      ],
    ),
  );
}

// login_state.dart

import 'package:flutter/material.dart';

class LoginState extends ChangeNotifier {
  String _userName = "";

  String get userName => _userName;

  set userName(String userName) {
    _userName = userName;
  }
}

// Debug Console

════════ Exception caught by widgets library ═══════════════════════════════════
The following ProviderNotFoundException was thrown building Login(dirty):
Error: Could not find the correct Provider<LoginState> above this Login Widget

To fix, please:

  * Ensure the Provider<LoginState> is an ancestor to this Login Widget
  * Provide types to Provider<LoginState>
  * Provide types to Consumer<LoginState>
  * Provide types to Provider.of<LoginState>()
  * Ensure the correct `context` is being used.

If none of these solutions work, please file a bug at:
https://github.com/rrousselGit/provider/issues

The relevant error-causing widget was
    Login
When the exception was thrown, this was the stack
Provider.of
buildLoginForm
Login.build
StatelessElement.build
ComponentElement.performRebuild

Answer 1

The context you passed to login_builder is the same context that was passed to login_view, so it exists in a place of the widget tree above where you inserted your ChangeNotifierProvider which is why you can't find it with Provider.of . In order to get this to work the way you want it to, you need to utilize a Builder widget to gain a new BuildContext that exists below the provider:

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<LoginState>(
      create: (context) => LoginState(),
      child: Builder(builder: buildLoginForm), 
    );
  }
}

Now the context passed to buildLoginForm will be the context for the Builder (which exists below the provider) instead of for your Login widget (which exists above the provider).