{"id":310,"date":"2020-10-16T00:07:26","date_gmt":"2020-10-15T22:07:26","guid":{"rendered":"https:\/\/fileidea.com\/?p=310"},"modified":"2020-10-19T11:32:11","modified_gmt":"2020-10-19T09:32:11","slug":"create-a-flutter-navigational-menu-with-dynamic-menu-items-from-a-http-get-call","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2020\/10\/16\/create-a-flutter-navigational-menu-with-dynamic-menu-items-from-a-http-get-call\/","title":{"rendered":"Create a Flutter Navigational Menu with dynamic menu items from a http GET call"},"content":{"rendered":"\n
\"\"
End result of the drawer<\/figcaption><\/figure><\/div>\n\n\n\n

The goal here is to create a dynamic navigational Flutter draw menu and then have menu items being added through the data coming from a http GET call. Then have each item refer to a route using their unique id.<\/p>\n\n\n\n

We will first create the menu, then add some static items, then take use of a local List, then see how you can add elements to that list with a simple click. Then we see how we can make the HTTP call and take that data to make menu items. Then what we can do to display data from an id coming in to the route after clicking on a menu item. We’ll keep everything very simple go from the beginning when creating a new project.<\/p>\n\n\n\n

If you don’t have the Flutter extension for VS code, please do the following in VS Code:<\/p>\n\n\n\n

Invoke View > Command Palette\u2026.
Type \u201cinstall\u201d, and select Extensions: Install Extensions.
Type \u201cflutter\u201d in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.<\/p>\n\n\n\n

I will now create a new project<\/strong> by pressing CTRL+SHIFT+P to get to the command window and enter Flutter and choose New Project, enter my project name and then Enter. Visual Code will then create our Flutter project and we are ready to go! First of all, I am just going to test run my application. Using Android Studio to have my Emulator ready and run.<\/p>\n\n\n

\nflutter run\n<\/pre><\/div>\n\n\n
Takes a while to build, specially the first time.<\/p>\n\n\n\n
\"\"
Default code when creating a new project<\/figcaption><\/figure><\/div>\n\n\n\n
Then we can see our application is alive and well. Thanks to the default code we already got some things we can use, so I will not touch anything and simply just add a drawer property to the already defined _MyHomePageState under class _MyHomePageState extends State<MyHomePage> {.<\/p>\n\n\n\n
  1. Add a drawer to the Widget under _MyHomePageState<\/strong> after the body <\/strong>property.<\/li><\/ol>\n\n\n
    \nclass _MyHomePageState extends State<MyHomePage> {\n  int _counter = 0;\n\n  void _incrementCounter() {\n    setState(() {\n      _counter++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(widget.title),\n      ),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: <Widget>[\n            Text(\n              'You have pushed the button this many times:',\n            ),\n            Text(\n              '$_counter',\n              style: Theme.of(context).textTheme.headline4,\n            ),\n          ],\n        ),\n      ),\n      drawer: Drawer(\n        \/\/ We will get a ListView to show menu items here\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: _incrementCounter,\n        tooltip: 'Increment',\n        child: Icon(Icons.add),\n      ), \/\/ This trailing comma makes auto-formatting nicer for build methods.\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    Great we have now added a drawer property along with an empty Drawer(). Hot reload (press R) and we can see the draw menu is there<\/strong>! <\/p>\n\n\n\n
    2. Add Widgets to the ListView<\/strong>.<\/p>\n\n\n\n
    Okay we got the menu but no items. Let’s add them. We can do that by defining a child property to the drawer saying what things should be there, and we will define a ListView which we will define children for.
    First off let’s add a DrawerHeader <\/strong>like this. I am showing the drawer property code from now on.<\/p>\n\n\n
    \n drawer: Drawer(\n          child: ListView(\n        padding: EdgeInsets.zero,\n        children: <Widget>[\n          DrawerHeader(\n              child: Text('Drawer Header'),\n              decoration: BoxDecoration(\n                color: Colors.blue,\n              ))\n        ],\n      )),\n<\/pre><\/div>\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Do a hot reload and we can see the the head in blue with black text when opening up the drawer.<\/p>\n\n\n\n
    Then add two more Widgets <\/strong>(items).<\/p>\n\n\n
    \ndrawer: Drawer(\n          child: ListView(\n        padding: EdgeInsets.zero,\n        children: <Widget>[\n          DrawerHeader(\n              child: Text('Drawer Header'),\n              decoration: BoxDecoration(\n                color: Colors.blue,\n              )),\n          ListTile(\n            title: Text('Item 1'),\n            onTap: () {\n              \/\/ Update the state of the app\n              \/\/ ...\n              \/\/ Then close the drawer\n              Navigator.pop(context);\n            },\n          ),\n          ListTile(\n            title: Text('Item 2'),\n            onTap: () {\n              \/\/ Update the state of the app\n              \/\/ ...\n              \/\/ Then close the drawer\n              Navigator.pop(context);\n            },\n          ),\n        ],\n      ))\n<\/pre><\/div>\n\n\n
    \n
    \"\"<\/figure>\n\n\n\n
    Neat we got some items, Drawer Header, Item 1 and Item 2. Nothing happens when we click but they are there. Now, we still have that plus icon along with the increment function to list amount of clicks from the demo\/sample\/default code right? What if use this to add items to an list have created and use that for displaying the items in the menu.<\/p>\n<\/div><\/div>\n\n\n\n
    3. Create a List of menu items<\/strong><\/p>\n\n\n\n
    So we know that the drawer uses ListTile Widgets <\/strong>for their menu items. Let’s create a local list of that straight under the _counter <\/strong>property.<\/p>\n\n\n
    \n  List<Widget> listOfItems = new List<Widget>();\n<\/pre><\/div>\n\n\n
    Okay we have a new property called listOfItems<\/strong>. Let’s try remove what we did before and insert our list there directory along with an add to list method in the _incrementalCounter<\/strong>(). So first let’s add the list like this replacing our previous static items:<\/p>\n\n\n
    \ndrawer: Drawer(\n        child: ListView(\n        padding: EdgeInsets.zero,\n        children: this.listOfItems,\n      )),\n<\/pre><\/div>\n\n\n
    Then we will continue to add some code for adding to the list under the _incrementalCounter<\/strong>() method here:<\/p>\n\n\n
    \n  void _incrementCounter() {\n    setState(() {\n      _counter++;\n      this.listOfItems.add(ListTile(\n            title: Text('Item'),\n            onTap: () {\n              \/\/ Update the state of the app\n              \/\/ ...\n              \/\/ Then close the drawer\n              Navigator.pop(context);\n            },\n          ));\n    });\n  }\n<\/pre><\/div>\n\n\n
    Now when we click the plus button we will add a new item to the menu!<\/p>\n\n\n\n
    So we’ve demonstrated and seen that it is possible to add items to the menu list and change it dynamically! Let’s take this a step further and add data from a http call<\/strong> which is used to fill the menu items that way instead. However, first, since it doesn’t happen anything when we click. Let’s add that functionality as well, we want to get to a new page when we click on the menu item. We want information about the item. We can achive this by having a widget which returns a scaffold with some information which navigate to when click on an item.<\/p>\n\n\n\n
    Create a stateless widget<\/p>\n\n\n\n
    I am now going to create a stateless widget with the name MenuItemPage<\/strong><\/p>\n\n\n
    \nclass MenuItemPage extends StatelessWidget {\n  const MenuItemPage({Key key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      child: Center(),\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    You’ll see where we are going with this right? This is the widget we are going to navigate to when item is pressed. This means we should have some kind of id passed along. Lets add this.<\/p>\n\n\n
    \nclass MenuItemPage extends StatelessWidget {\n  const MenuItemPage({Key key}) : super(key: key);\n  final int id = 0;\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      child: Center(),\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    If we were to render this widget it would be kind of boring with nothing to display so let’s add a whole Scaffold.<\/p>\n\n\n
    \nclass MenuItemPage extends StatelessWidget {\n  const MenuItemPage({Key key, this.id}) : super(key: key);\n  final int id;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text("Another Page"),\n      ),\n      body: Center(\n          child: Text(\n        'Viewing Menu Item Page with ID $id',\n        textAlign: TextAlign.center,\n        overflow: TextOverflow.ellipsis,\n        style: TextStyle(fontWeight: FontWeight.bold),\n      )),\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    We have now added a Scaffold and made so that id is a parameter.<\/p>\n\n\n\n
    And then lets make it possible to navigate to our Widget like this:<\/p>\n\n\n
    \n66this.listOfItems.add(ListTile(\n            title: Text('Item'),\n            onTap: () {\n              Navigator.push(\n                context,\n                MaterialPageRoute(builder: (context) => MenuItemPage(id: 1)),\n              );\n            },\n          ));\n    });\n<\/pre><\/div>\n\n\n
    Result looks like this after we clicked the plus and then clicked on the item<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
     Great, we got the whole idea of how it should work. Now we want to add some real data.<\/p>\n\n\n\n
    4. Get menu items from an external resource <\/strong>– Add http<\/strong><\/p>\n\n\n\n
    Let’s add the http <\/strong>flutter library by adding http in our pubspec.yaml <\/strong>file under dependencies under flutter<\/p>\n\n\n
    \nhttp: ^0.12.2\n<\/pre><\/div>\n\n\n
    Also add permissions like this to your AndroidManifest.xml<\/strong> file<\/p>\n\n\n
    \n<uses-permission android:name="android.permission.INTERNET" \/>\n<\/pre><\/div>\n\n\n
    Then import http in your main.dart<\/strong> file at the top<\/p>\n\n\n
    \nimport 'package:http\/http.dart' as http;\n<\/pre><\/div>\n\n\n
    4. Add a Future<\/strong><\/p>\n\n\n\n
    Okay now we are ready to use http! Http means we are going to work with asynchronous data so let’s add a Future like this:<\/p>\n\n\n
    \nFuture<http.Response> getMenuItems() async {\n  final response = await http.get('https:\/\/jsonplaceholder.typicode.com\/todos');\n  return response;\n}\n<\/pre><\/div>\n\n\n
    Now if you have some better data source and your own you can feel free to replace this but jsonplaceholder.typicode.com got some nice sample data and how it looks isn’t that important so the todo objects will work for this example! So pretend “todos” is menu items here.<\/p>\n\n\n\n
    What we do here is that we declare a Future <\/strong>with the http.Response<\/strong> type and make it async <\/strong>because http.get() will do an asynchronous call. We wait for it is done and save the value into a final variable. Then we simply return it. Try visit https:\/\/jsonplaceholder.typicode.com\/todos<\/a> to see the data we want to retrieve to get a feeling of how it can look.<\/p>\n\n\n\n
    One item looks like this in json format.<\/p>\n\n\n
    \n{\n"userId": 1,\n"id": 1,\n"title": "delectus aut autem",\n"completed": false\n}\n<\/pre><\/div>\n\n\n
    What we can use for our items are the title<\/strong> property.<\/p>\n\n\n\n
    Let’s call this method to see that we actually get some data back. Call the getMenuItems<\/strong>() method. To do that we can make a initState <\/strong>in our _MyHomePageState <\/strong>class just above _incrementCounter<\/strong>().<\/p>\n\n\n
    \n4@override\n  void initState() {\n    super.initState();\n    getMenuItems();\n  }\n<\/pre><\/div>\n\n\n
    Great we are now calling on the method. But we have no idea if it is actually doing something. Let’s add some printing to our console like so in our initState<\/strong>() we just added. So what we do is that we wait for the result then print out the incoming json data with jsonDecode() inside the then<\/strong> method. <\/p>\n\n\n
    \nFuture futureMenuItems;\n\n  @override\n  void initState() {\n    super.initState();\n\n    getMenuItems().then((value) => print(jsonDecode(value.body)));\n  }\n<\/pre><\/div>\n\n\n
    Let’s do a Hot Restart (R) and we can see the data being printed out in our console:<\/p>\n\n\n\n
    \"\"
    The VS console<\/figcaption><\/figure>\n\n\n\n
    Looks like we got a respond when the application in started which is what we want. We now want to fill our list with this data. Should be easy enough, and to do it “right” we should have a class so we have the menu items properly defined. <\/p>\n\n\n\n
    5. Add class<\/strong><\/p>\n\n\n\n
    \"\"
    folder structure<\/figcaption><\/figure><\/div>\n\n\n\n
    I’ll start by adding a folder under lib called models<\/strong>. Inside this folder I’ll create file for the class called MenuItem.dart<\/strong> and define the following properties.<\/p>\n\n\n
    \nclass MenuItem {\n  final String title;\n\n  MenuItem({this.title});\n\n  factory MenuItem.fromJson(Map<String, dynamic> json) {\n    return MenuItem(\n      title: json['title'],\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    We now have a class with the title <\/strong>property. Notice how we also have a constructor where we take a value for the title in initialization and a factory method as well which we can use to pass the json data from the http get request to map up as a object. <\/p>\n\n\n\n
    Now set a Future property with the type of MenuItem since we no longer want generic data to work with and place it under the _MyHomePageState <\/strong>.<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n
    \nFuture<List<MenuItem>> futureMenuItems;\n<\/pre><\/div>\n\n\n
    Update the getMenuItems<\/strong>() method as well <\/p>\n\n\n
    \nFuture<List<MenuItem>> getMenuItems() async {\n  final response =\n      await http.get('https:\/\/jsonplaceholder.typicode.com\/todos\/');\n  if (response.statusCode == 200) {\n    List<MenuItem> values = new List<MenuItem>.from(\n        json.decode(response.body).map((data) => MenuItem.fromJson(data)));\n\n    \/\/ lets print out the title property\n    values.forEach((element) {\n      print(element.title);\n    });\n    return values;\n  } else {\n    \/\/ If the server did not return a 200 OK response,\n    \/\/ then throw an exception.\n    throw Exception('Failed to load album');\n  }\n}\n<\/pre><\/div>\n\n\n
    Here we set and map the json data with help of the fromJson<\/strong> method to parse each element.<\/p>\n\n\n\n
    Now update your initState<\/strong>() and set the futureMenuItems propety to be equals to what we get from getMenuItems()<\/strong>.<\/p>\n\n\n
    \n  @override\n  void initState() {\n    super.initState();\n    futureMenuItems = getMenuItems();\n  }\n<\/pre><\/div>\n\n\n
    Okay, we got our data into our futureMenuItems <\/strong>variable. Time to use it in our drawer and replace what we’ve used before. So let’s change our drawer with a FutureBuilder()<\/strong> which we can use to take use of our futureMenuItems <\/strong>property, then we will use the generate <\/strong>function to create ListTitle<\/strong>s.<\/p>\n\n\n
    \ndrawer: Drawer(\n          child: FutureBuilder(\n              future: futureMenuItems,\n              builder: (context, AsyncSnapshot<List<MenuItem>> snapshot) {\n                if (!snapshot.hasData) {\n                  return Container();\n                } else {\n                  return ListView(\n                      children: List.generate(snapshot.data.length, (index) {\n                    return ListTile(\n                      title: Text(snapshot.data[index].title),\n                      onTap: () {\n                        Navigator.push(\n                          context,\n                          MaterialPageRoute(\n                              builder: (context) => MenuItemPage(id: snapshot.data[index].id)),\n                        );\n                      },\n                    );\n                  }));\n                }\n              })),\n      floatingActionButton: FloatingActionButton(\n        onPressed: _incrementCounter,\n        tooltip: 'Increment',\n        child: Icon(Icons.add),\n      ), \/\/ This trailing comma makes auto-formatting nicer for build methods.\n    );\n<\/pre><\/div>\n\n\n
    Note that we added MaterialPageRoute<\/strong> here for the onTap<\/strong> method which we are passing id as a parameter to the MenuItemPage<\/strong> constructor.<\/p>\n\n\n\n
    Since this id property from the MenuItem class is not yet created we’ll create it.<\/p>\n\n\n
    \nclass MenuItem {\n  final String title;\n  final int id;\n  MenuItem({this.title, this.id});\n\n  factory MenuItem.fromJson(Map<String, dynamic> json) {\n    return MenuItem(title: json['title'], id: json['id']);\n  }\n}\n\n<\/pre><\/div>\n\n\n
    We are now also mapping up the id property in the FromJson method.<\/p>\n\n\n\n
    Great we can now do a hot reload and see that when we click on an item. We will see the text “Viewing Menu Item Page with ID X”, where X being any of the id you clicked on. Works pretty well! Now if you wanted the title text you could do the same way and pass that variable as well, however, what we will do instead is stay with the id only and then pick up the item data with help by the id. That way it is easier to grab more information from lists etc.<\/p>\n\n\n\n
     To make the List more accessible from more classes I’ll now make the futureMenuItems<\/strong> static and move it up to the MyHomePage<\/strong>. Of course you would have better structure and maybe create a proper main class with the name Main in it etc, but for the purpose of not dragging on too long we will make it static like this under the MyHomePage<\/strong> class straight under title:<\/p>\n\n\n
    \nstatic Future<List<MenuItem>> futureMenuItems;\n<\/pre><\/div>\n\n\n
    Then also change the places futureMenuItems <\/strong>is used so it uses MyHomePage.futureMenuItems<\/strong> instead like this under the initState<\/strong>() method:<\/p>\n\n\n
    \nMyHomePage.futureMenuItems = getMenuItems();\n<\/pre><\/div>\n\n\n
    and under the drawer future property:<\/p>\n\n\n
    \nfuture: MyHomePage.futureMenuItems,\n<\/pre><\/div>\n\n\n
    It should work just like before, now we simply get the MenuItems data from the same place which is the MyHomePage<\/strong> class.<\/p>\n\n\n\n
    7. Finish MenuItemPage<\/strong><\/p>\n\n\n\n
    Next up in the MenuItemPage<\/strong> we will now retrieve our item with the help of the id. <\/p>\n\n\n\n
    Now we will change things up, and since out widgets now needs to be able to re-render because of how it can change with our id we need it to be stateful. So what we will do is we will have MenuItemPage extend StatefulWidget and have an id defined just like before, then in our state we will need a FutureBuilder <\/strong>to wait for our value from FutureItems where we fetch the item we want from the id. Like this. <\/p>\n\n\n
    \nclass MenuItemPage extends StatefulWidget {\n  MenuItemPage({Key key, this.id}) : super(key: key);\n  final int id;\n\n  @override\n  _MenuItemPageState createState() => _MenuItemPageState();\n}\n\nclass _MenuItemPageState extends State<MenuItemPage> {\n  @override\n  void initState() {\n    super.initState();\n  }\n\n  Future<MenuItem> loadItemDataForPage() async {\n    MenuItem localMenuItem = new MenuItem();\n    await MyHomePage.futureMenuItems.then((value) =>\n        {localMenuItem = value.firstWhere((v) => v.id == widget.id)});\n    return localMenuItem;\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return FutureBuilder(\n        future: loadItemDataForPage(),\n        builder: (context, snapshot) {\n          if (!snapshot.hasData) {\n            \/\/ Future hasn't finished yet, return a placeholder\n            return Text('Loading');\n          }\n          return Scaffold(\n              appBar: AppBar(\n                title: Text("Another Page"),\n              ),\n              body: Center(\n                  child: Column(\n                mainAxisAlignment: MainAxisAlignment.center,\n                crossAxisAlignment: CrossAxisAlignment.center,\n                mainAxisSize: MainAxisSize.min,\n                children: <Widget>[\n                  Text('This is ID ${snapshot.data.id}'),\n                  Text(snapshot.data.title),\n                ],\n              )));\n        });\n  }\n}\n\n<\/pre><\/div>\n\n\n
    A lot of things happening here but some notes to take after our latest changes:<\/p>\n\n\n\n