Flutter how to get value from TextEditingController to another class

Question

I'm creating an App that would fetch data from an API endpoint and wanted to be able to set the endpoint url using a form. i read that i need to use global keys but not sure how , mostly i only using it to validate a form and did not comply with the new Flutter nullable feature.

api.dart

import 'package:flutter/cupertino.dart';
import 'package:futurebuilder_example/page/settings_page.dart';
import 'package:futurebuilder_example/model/devices.dart';
import 'package:http/http.dart' as http;

String url = url_from_TextEditingController; //get URL from form

class DeviceApi {
  static Future<List<Devices>> getDevices() async {
    final response = await http.get(url);
    print(response.statusCode);

    if (response.statusCode == 200) {
      return devicesFromJson(response.body);
    } else {
      throw Exception('Failed to load devices');
    }

and here's the settings_page.dart for configuring the url value :

import 'package:flutter/material.dart';

// Define a custom Form widget.
class SettingsPage extends StatefulWidget {
  @override
  SettingsPageState createState() {
    return SettingsPageState();
  }
}

class SettingsPageState extends State<SettingsPage> {
  final myController = TextEditingController(text: "Please Input API URL");
  final GlobalKey<SettingsPageState> key = new GlobalKey();
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  getText() {
    return myController.text;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('Retrieve Text Input'),
      // ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: myController,
        ),
      ),
    );
  }
}

Solution

you haven't mention where you are calling your Api. Anyways you will definitely create a click event or tap event call call your api. You can just pass the value into function of the api class. For e.g.:-

import 'package:flutter/cupertino.dart';
import 'package:futurebuilder_example/page/settings_page.dart';
import 'package:futurebuilder_example/model/devices.dart';
import 'package:http/http.dart' as http;


class DeviceApi {


  static Future<List<Devices>> getDevices(String url) async {
    final response = await http.get(url);
    print(response.statusCode);

  if (response.statusCode == 200) {
    return devicesFromJson(response.body);
  } else {
    throw Exception('Failed to load devices');
}

the above class can be called in your stateful widget on a button tap event:-

import 'package:flutter/material.dart';

// Define a custom Form widget.
class SettingsPage extends StatefulWidget {
  @override
  SettingsPageState createState() {
  return SettingsPageState();
 }
}

class SettingsPageState extends State<SettingsPage> {
  final myController = TextEditingController(text: "Please Input API URL");
  final GlobalKey<SettingsPageState> key = new GlobalKey();
  void dispose() {
    myController.dispose();
    super.dispose();
   }

 getText() {
  return myController.text;
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
    // appBar: AppBar(
    //   title: Text('Retrieve Text Input'),
    // ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
          children:[
          TextField(
          controller: myController,
         ),
          MaterialButton(
            child: Text('Click Me'),
            onTap:(){
              DeviceApi.getDevices(myController.text)
          }
       ) 
     ])
    ),
  );
 }
}

Comments

[ggk]

Sorry for the incomplete information I provided for the question. in the end, I found another solution using SharedPreferences. Nevertheless, thanks for the answer 😅