CODEWITHSUNDEEP
dartflutter
SDevjani
SDevjani

Reputation: 143

Flutter Custom Icons not Rendering

I am trying to add custom icons to navigation drawer using following this article: https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977. However, the icons are not rendering. The code is as Follows:

import 'package:flutter/material.dart';
import '../custom_app_icons.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return new MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text("check"),
      ),
      drawer: XmobeMenu(5),
    ),

  );
}
}

final List<MenuItem> menuItems = <MenuItem>[
MenuItem(0,'Home',custom.home,Icons.chevron_right),
MenuItem(0,'Home',custom.home,Icons.chevron_right),
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
];

class XmobeMenu extends StatelessWidget {
int indexNumber;
XmobeMenu(int menuIndex)
{
  indexNumber =menuIndex;
}
@override
Widget build(BuildContext context) {
  return Drawer(
    child: ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return MenuItemWidget(menuItems[index],indexNumber);
      },
      itemCount: menuItems.length,
    ),
  );
}
}

class MenuItem {
MenuItem(this.itemNumber,this.title, this.leadIcon, this.trailIcon,);
final int itemNumber;
final IconData leadIcon;
final IconData trailIcon;
final String title;
}

class MenuItemWidget extends StatelessWidget {
final MenuItem item;
final int indexNumber;
const MenuItemWidget(this.item, this.indexNumber);

Widget _buildMenu(MenuItem menuItem, context) {
  return InkWell(
    onTap: () {
      Navigator.of(context).push(
        new MaterialPageRoute(
          builder: (BuildContext context) => MyApp(),
        ),
      );
    },
    child: new Container(
      color: const Color.fromARGB(0, 245,245,245),
      child: new Column(
        children: <Widget>[
          new Column( children: <Widget>[
            Container(
                padding: new EdgeInsets.all(8.0), 
                child: Row(
                  children: <Widget>[
                    new Icon(menuItem.leadIcon),
                    new Expanded (
                      child: new Text(menuItem.title),
                    ),
                    new Icon(menuItem.trailIcon),
                  ],
                )
            ),
            Divider(height: 1.0,color: Colors.grey,),
          ],)
        ],
      ),

    ),
  );
}

@override
Widget build(BuildContext context) {
  return _buildMenu(this.item, context);
}


}

Please assist me in solving this issue. Thanks in advance

Upvotes: 3

Views: 4231

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

This import is invalid:

import '../custom_app_icons.dart';

Never use a relative path to navigate to a file outside of lib/

Currently there is also a bug (already fixed in Dart but not landed downstream in Flutter yet) that causes issues when relative paths are used in lib/main.dart.

To fix the issue move custom_app_icons.dart somewhere below lib/ and import it like

import 'package:my_app/icons/custom_app_icons.dart';

(assuming custom_app_icons.dart is in lib/icons/custom_app_icons.dart)

Upvotes: 3

Related Questions