How can I import a variable from one .dart file to another in flutter

Question

I am trying to learn flutter from udacity and one of the task is to import variables from main.dart files to the category.dart in order to create a new widget.

Unfortunately I couldn't manage to import the _categoryIcon in the main dart file to category dart. (also the _categoryName and _categoryColor) here is the main.dart file:

import 'package:flutter/material.dart';
import 'package:unispero/category.dart';

const _categoryName = 'Cake';
const _categoryIcon = Icons.cake;
const _categoryColor = Colors.green;

/// The function that is called when main.dart is run.
void main() {
  runApp(UnitConverterApp());
}

/// This widget is the root of our application.
/// Currently, we just show one widget in our app.
class UnitConverterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Unit Converter',
      home: Scaffold(
        backgroundColor: Colors.green[100],
        body: Center(
          // TODO: Determine what properties you'll need to pass into the widget
          child: Category(_categoryColor, _categoryIcon, _categoryName),
        ),
      ),
    );
  }
}

and here is the category.dart:

import 'package:flutter/material.dart';
import 'package:unispero/main.dart';


class Category extends StatelessWidget {
  /// Creates a [Category].
  ///
  /// A [Category] saves the name of the Category (e.g. 'Length'), its color for
  /// the UI, and the icon that represents it (e.g. a ruler).
  // TODO: You'll need the name, color, and iconLocation from main.dart
  const Category(_categoryColor, _categoryIcon, _categoryName);

  /// Builds a custom widget that shows [Category] information.
  ///
  /// This information includes the icon, name, and color for the [Category].
  @override
  // This `context` parameter describes the location of this widget in the
  // widget tree. It can be used for obtaining Theme data from the nearest
  // Theme ancestor in the tree. Below, we obtain the display1 text theme.
  // See https://docs.flutter.io/flutter/material/Theme-class.html
  Widget build(BuildContext context) {
    // TODO: Build the custom widget here, referring to the Specs.
    // const _categoryIcon = Icons.cake;
    // IconData? _categoryIcon;
    return Container(
      // width: 50,
      child: Row(children: <Widget>[
        Icon(_categoryIcon),
      ]),

      height: 100,
      color: Colors.blueAccent,
    );
  }
}

Sorry if this is an easy question but I couldn't find the answer

Solution

You can't import variable from another file which has an underscore. The Underscore fields are only accessible in the .dart file. In this case your main.dart. If you still want to access these values you have to create getters for them.

get categoryName => _categoryName;
get categoryIcon => _categoryIcon;
get categoryColor => _categoryColor;

Another problem that I see is your Category constructor. You pass the values in your main.dart but didn't declare these fields in Category.

class Category extends StatelessWidget {
  /// Creates a [Category].
  ///
  /// A [Category] saves the name of the Category (e.g. 'Length'), its color for
  /// the UI, and the icon that represents it (e.g. a ruler).
  // TODO: You'll need the name, color, and iconLocation from main.dart
  const Category(this._categoryColor, this._categoryIcon, this._categoryName);

  final _categoryColor;
  final _categoryIcon;
  final _categoryName;

  /// Builds a custom widget that shows [Category] information.
  ///
  /// This information includes the icon, name, and color for the [Category].
  @override
  // This `context` parameter describes the location of this widget in the
  // widget tree. It can be used for obtaining Theme data from the nearest
  // Theme ancestor in the tree. Below, we obtain the display1 text theme.
  // See https://docs.flutter.io/flutter/material/Theme-class.html
  Widget build(BuildContext context) {
    // TODO: Build the custom widget here, referring to the Specs.
    // const _categoryIcon = Icons.cake;
    // IconData? _categoryIcon;
    return Container(
      // width: 50,
      child: Row(children: <Widget>[
        Icon(_categoryIcon),
      ]),

      height: 100,
      color: Colors.blueAccent,
    );
  }
}

Comments

[quoci]

You are welcome. Would you mind marking this answer then for others?