Flutter：使用 Provider 从 Firestore 获取数据

Question

我想从 Firestore 文档中获取数据并显示在应用程序中的任何位置。 例如，我想从我的 firestore 数据库中获取 objectID，如下所示。

我想通过做这样的事情在用户界面上显示这个字符串

Widget _displayObjectID() {
final provider = ShortlistProvider.of(context);
String objectID = provider.objectID;
  return Text(objectID);
}

我基本上想在我的应用程序中的任何地方轻松访问它。 是否可以？如果是这样，请告诉我有什么方法。 我已经被困在这里好几个星期了，试图观看所有 Youtube 并阅读 StackOverflow 上的所有帖子。

Answer 1

如果您想访问应用程序中所有屏幕的数据，您可以使用MultiProvider。

void main(){
   runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider(create: ((context) => SampleProvider.instance)),
        ],
        child: const MyApp(),
      ),
   );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       initialRoute: /home
    );
  }
}

SampleProvider 应如下所示：

class SampleProvider extends ChangeNotifier {
   String? _objectId;
   String? get objectId => _objectId;
   
   SampleProvider.instance(){
     getObjectIdFromFirestore();
   }

   getObjectIdFromFirestore() async {
      //The code used to fetch the object id from the "Firestore".
      _objectId = 'JvadsfAJdfavdAJAdf';
      notifyListeners();
   }
}

现在您可以从所有屏幕访问“objectId”并监听更改。

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: ...
       body: Column(
         children: [
           Text(context.read<SampleProvider>().objectId ?? ''),
           //You can use "Selector" widget to listen for changes in "objectId".
           Selector<SampleProvider, String?>(
              selector: (_, provider) => provider.objectId,
              builder: (_, value, __) => Text(value ?? ''),
           ),
         ], 
       ),
    );
  }
}

要访问子小部件中的“SampleProvider”类：

SampleProvider provider = context.read<SampleProvider>();

或

SampleProvider provider = Provider.of<SampleProvider>(context, listen: false);

上面的示例仅包含一种选择。 Provider 包中还有许多其他选项来访问类或监听更改。

这些选项在文档中有详细描述。 您可以通过查看文档来选择最适合您的场景的方法。