Dart/Flutter – How to solve naming conflict or ambiguous import

1. The cause

When working with Dart or Flutter, sometimes you will face this problem when:

  • Two or more packages/libraries have the same class name.
    AND
  • You import those packages in the same dart files.

👉 The compiler can not know which class(es) (in which package/library) it should use. It feels ambiguous. Then it throws a kind of error like this

 // 'Element' class appears in both framework.dart and dom.dart 
// -> Compiler: which Element should I use?

Compiler message: 'Element' is imported from both
'package:flutter/src/widgets/framework.dart' and
'package:html/dom.dart'.

// 'Router' class appears in both fluro/src/router.dart and flutter/src/widgets/router.dart 
// -> Compiler: which Router should I use?

Compiler message: 'Router' is imported from both
'package:fluro/src/router.dart' and
'package:flutter/src/widgets/router.dart'.


2. Solutions

There are 2 solutions I have known so far to solve this problem

a. Hide ALL conflicting classes that you don’t use, so that the Compiler only sees the class(es) it should use.

// Suppose we need to use Element in dom.dart.
// We hide the Element in framework.dart. 
// Now the compiler can not see Element in framework.dart anymore.
import 'package:flutter/src/widgets/framework.dart' hide Element;
import 'package:html/dom.dart';

// Suppose we need to use Router in fluro package.
// We hide the Router in flutter widgets package. 
// Now the compiler can not see Router in flutter widgets anymore.
import 'package:flutter/src/widgets/router.dart' hide Router;
import 'package:fluro/src/router.dart';

Notes: You need to “hide” all unused class(es). If the conflicting class appears in multiple packages, you have to hide multiple times.

b. Use “as” keyword to provide the name to the class you want to use. Then use this name as a prefix of the class(es).

// Suppose we need to use Element in dom.dart.
// We provide it a name then put use the name as a prefix. 
// Now the compiler knows exactly which package it should use.
// It is dom in this case.
import 'package:flutter/src/widgets/framework.dart';
import 'package:html/dom.dart' as dom;

// Then replace all Element by dom.Element

// Suppose we need to use Router in fluro package.
// We provide it a name then use name as a prefix. 
// Now the compiler shows exactly which package it should use. 
// It is fluro in this case.
import 'package:flutter/src/widgets/router.dart';
import 'package:fluro/src/router.dart' as fluro;

// Then replace all Router by fluro.Router

Hope this helps you save some minutes in your life! 
If you are looking for a developer or a team to build you next projects, please Drop us your request!

Tagged : / / / /
Subscribe
Notify of
guest

1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Syed Anwar
1 year ago

package:flutter/src/widgets/framework.dart

Click on the upper link. Find all ‘Element’ in the dart file and replace that ‘Element’ with ‘Element'(Change the Spelling). and save the code and execute the file. You will not face this error again.

1
0
Would love your thoughts, please comment.x
()
x