Firebase – Flutter – Variable in function available when building Widget

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';
import 'package:safegaurd/constants.dart';
//import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart';
import 'package:safegaurd/screens/log_in_page.dart';
import 'package:safegaurd/components/buttons_navigate.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'new_device_page.dart';

class DeviceSelectionPage extends StatefulWidget {
  const DeviceSelectionPage({Key? key}) : super(key: key);
  static const String id = 'device_selection_page';

  @override
  State<DeviceSelectionPage> createState() => _DeviceSelectionPageState();
}

class _DeviceSelectionPageState extends State<DeviceSelectionPage> {
  final _auth = FirebaseAuth.instance;
  User? loggedInUser;

  final firestoreInstance = FirebaseFirestore.instance;
  final String devices = 'devices';
  List? _documentsIds;

  bool showSpinner = false;

  //bool _isSelected1 = false;
  //bool _isSelected2 = false;
  //DateTime _dateTime = DateTime.now();
  String? selectedValue;
  final bool checkOne = false;
  Color sDeviceAlways = Colors.white54;
  Color sDeviceTime = Colors.white54;
  FontWeight sDeviceAlwaysW = FontWeight.normal;
  FontWeight sDeviceTimeW = FontWeight.normal;

  @override
  void initState() {
    super.initState();
    getCurrentUser();
    getDevices();
  }

  void getCurrentUser() async {
    try {
      final user = await _auth.currentUser;
      if (user != null) {
        getDevices();
      };
    } catch (e) {
      print(e);
    }
  }


  Future<List<dynamic>> getDevices() async {
      var firebaseUser = FirebaseAuth.instance.currentUser?.email;
      print('firebaseUser: $firebaseUser');
      var query = await firestoreInstance
          .collection(devices)
          .where('email', isEqualTo: '$firebaseUser')
          .get();
     List<String> _documentsIds = query.docs.map((doc) => doc.id).toList();
      print('_documentsIds: $_documentsIds');

      return _documentsIds;
  }

  @override
  Widget build(BuildContext context) {
    print('_documentsIds: $_documentsIds');
    return Scaffold(
        appBar: AppBar(
          leading: null,
          actions: [
            IconButton(
                onPressed: () {
                  _auth.signOut();
                  Navigator.pop(context);
                },
                icon: Icon(Icons.close))
          ],
          title: const Text('Device Selection page'),
        ),
        body: ModalProgressHUD(
          inAsyncCall: showSpinner,
          child: Container(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(
                height: 40,
                child: Text(
                  'SAFEGAURD',
                  style: kAppTextStyle,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 380,
                    padding: const EdgeInsets.symmetric(horizontal: 24.0),
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.lightBlueAccent, width: 1.0),
                        borderRadius: kBorderRadius),
                    child: DropdownButtonHideUnderline(
                      child: FutureBuilder<List> (
                        future: getDevices(),
                        builder: (BuildContext context, AsyncSnapshot<List> snapshot){
                          if (!snapshot.hasData) {
                            return const Text('Waiting Devices',style: TextStyle(color: Colors.white54, fontSize: 25));
                          } else {
                            return DropdownButton(
                              hint: const Text(
                                'Safegaurd Devices',
                                style: TextStyle(color: Colors.white54, fontSize: 25),
                              ),
                              style:
                              const TextStyle(color: Colors.orange, fontSize: 25),
                              borderRadius: kBorderRadius,
                              iconSize: 40,
                              elevation: 16,
                              onChanged: (value) {
                                setState(() {
                                  selectedValue = value.toString();
                                  setState(() {
                                    selectedValue;
                                    print(selectedValue);
                                  });
                                });
                              },
                              value: selectedValue,
                              items: snapshot.data?.map((_documentsIds) =>
                              DropdownMenuItem<String>(
                              value: _documentsIds,
                              child: Text(_documentsIds),
                            )
                           ).toList(),
                            );
                          }
                        }
                      )
                    ),
                  )
                ],
              ),
              Row(
                children: [
                  Buttons_Navigate(
                    colour: Colors.teal,
                    title: 'Save Settings',
                    onPressed: () {},
                    width: 200,
                  ),
                ],
              ),
              Row(
                children: [
                  Buttons_Navigate(
                    colour: Colors.teal,
                    title: 'Claim new Device',
                    onPressed: () {
                      Navigator.pushNamed(context, NewDevicePage.id);
                    },
                    width: 200,
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Buttons_Navigate(
                      colour: Colors.orange,
                      title: 'Back',
                      onPressed: () {
                        Navigator.pushNamed(context, LogInPage.id);
                      },
                      width: 40)
                ],
              )
            ],
          )),
        ));
  }