AR Weather App in Flutter using ARKIT — Lesson 3

From this lesson, we will be starting with our AR Weather App. In this lesson, we will be starting with the UI Implementation of the Weather AR App.

Here is the structured course of this project.

Setup

1. create a new file inside the views folder named ar_weather.dart and create a stateful widget named ARWeatherScreen.
2. In your main.dart replace HelloWorldScreen with ARWeatherScreen.

Variable declaration

• In your ARWeatherScreen widget declare both variables.

final searchController = TextEditingController();
bool isSearchEnabled = false;

Widget Tree

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AR Weather APP in Flutter'),
        bottom: !isSearchEnabled
            ? null
            : PreferredSize(
                preferredSize: Size(MediaQuery.of(context).size.width, 50),
                child: Container(
                  color: Colors.white,
                  height: 50,
                  child: TextField(
                    controller: searchController,
                    textInputAction: TextInputAction.search,
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Please Enter a City',
                    ),
                    onEditingComplete: () async {
                      isSearchEnabled = false;
                      setState(() {});
                    },
                  ),
                ),
              ),
      ),
      body: Container(
        child: const Text(
          "Hello AR Weather App",
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.blue,
        onPressed: () {
          setState(() {
            isSearchEnabled = !isSearchEnabled;
          });
        },
        child: const Icon(Icons.search),
      ),
    );
  }

• Place these codes in your build method.
• For now, in your body place the Text Widget. We will be creating the ARKitView in the upcoming lesson.

You can check out the whole project on my GitHub.

GitHub — AgnelSelvan/AR-Weather-App-Flutter

Hurrah! and we are done with the UI Implementation of an AR App.

Do you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys!
Hello, I am Agnel Selvan. A noob developer. You can find me on Linkedin or stalk me on GitHub.