Houzi Docs logo Houzi Docs

To add an item to the drawer, follow these steps:

  1. Open the file hooks_v2.dart located in the following path within your project: Project_HOME > lib > hooks_v2.dart.

  2. Locate the getDrawerItems() method in the file.

  3. Inside the getDrawerItems() method, you can add a new item to the drawer by creating a DrawerItem object.

  4. Specify the properties of the DrawerItem object as follows:

  1. Once you have created the DrawerItem object, add it to the drawerItemList list.

  2. Finally, return the drawerItemList from the getDrawerItems() method.

To add an expandable item to the drawer, you can follow a similar process with an additional step:

  1. Create a new DrawerItem object for the expandable item.

  2. Set the expansionTileChildren property of the expandable item to a list of DrawerItem objects. These objects represent the items that will be displayed when the expandable item is clicked.

  3. Add the expandable item, along with its child items, to the drawerItemList list.

Here’s an updated example of the code:

@override
DrawerHook getDrawerItems() {
  DrawerHook drawerHook = (BuildContext context) {
    // Add a regular drawer item
    DrawerItem drawerItem = DrawerItem(
      sectionType: "section_name",
      title: "Your title here",
      checkLogin: false,
      enable: true,
      insertAt: 5,
      icon: Icons.real_estate_agent,
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => AllAgents(),
          ),
        );
      },
    );

    // Add an expandable item with child items
    DrawerItem expandedDrawerItem = DrawerItem(
      sectionType: "section_name",
      title: "Your title here",
      checkLogin: false,
      enable: true,
      insertAt: 5,
      icon: Icons.real_estate_agent,
      expansionTileChildren: [
        DrawerItem(
          sectionType: "hook",
          title: "Activities",
          checkLogin: true,
          enable: true,
          icon: Icons.article_outlined,
          onTap: () {
            // Add your code here for desired action
          },
        ),
        DrawerItem(
          sectionType: "hook",
          title: "Inquiries",
          checkLogin: true,
          enable: true,
          icon: Icons.question_answer,
          onTap: () {
            // Add your code here for desired action
          },
        ),
      ],
    );

    List<dynamic> drawerItemList = [drawerItem, crmExpandedDrawerItem];

    return drawerItemList;
  };

  return drawerHook;
}

Remember to replace the placeholder values with your desired names, titles, and actions.

Note: The Icons.xxxxx values in the code are based on the icons provided by the Google Material icons library. You can find the complete list of available icons here. Choose the appropriate icon by selecting the corresponding icon name from the library.

Previous: Hide Show Price Next: Segmented Control Design