city selection in flutter weather app - Flutter

Question

hope you doin' well I'm a newbie to flutter and I'm working on a basic weather app as a starter. now, somehow everything is okay, except the city name. I don't know how to implement city search feature and get data from api based on the location. In my code, I defined city name manually. here is my code:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:hava_chitor/Carousel.dart';
import 'package:hava_chitor/UnderCarousel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var temp;
  var name;
  var humidity;
  var description;
  var city = 'London';

  CarouselController buttonCarouselController = CarouselController();

  Future getWeather() async {
    http.Response response = await http.get(
        "http://api.openweathermap.org/data/2.5/weather?q=$city&units=metric&appid=apikey");
    var results = jsonDecode(response.body);
    setState(() {
      this.temp = results['main']['temp'];
      this.name = results['name'];
      this.humidity = results['main']['humidity'];
      this.description = results['weather'][0]['main'];
    });
  }

  @override
  void initState() {
    super.initState();
    this.getWeather();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hava Chitor?',
      theme: ThemeData(
        primaryColor: Color(0xff424242),
      ),
      home: Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          actions: [
            Padding(
              padding: const EdgeInsets.all(15),
              child: GestureDetector(
                onTap: () {
                  print('kir');
                },
                child: Icon(
                  Icons.add_circle_outline,
                  color: Color(0xff5d5f64),
                ),
              ),
            )
          ],
          backgroundColor: Colors.transparent,
          elevation: 0,
          iconTheme: IconThemeData(color: Color(0xff5d5f64)),
          title: Text(
            'Hava Chitor?',
            style: TextStyle(
                color: Color(0xff5d5f64),
                fontFamily: 'Sans',
                fontWeight: FontWeight.w700),
          ),
          centerTitle: true,
        ),
        backgroundColor: Colors.white,
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 1.0),
          child: Column(
            children: [
              Carousel(name),
              UnderCarousel(temp, description, humidity),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

you need to add a TextField and a TextFieldController and call the function getWeather when the user finish writing the city name, something like this

  String city;
  TextEditingController textEditingController = TextEditingController();

TextField(
  controller: textEditingController,
  onSubmitted: (value){
    city = textEditingController.text;
    getWeather();
  },
),