Search code examples
flutterdartpad

How to import a package into DartPad?


I'm doing Codelabs Write your first Flutter app. Step 4 is about using external packages. Is it possible to import external packages into DartPad? I see tabs in the lower left for "Console" and "Documentation" but there's nothing in these panes. Is the console a future feature of DartPad? Is there another way to import external packages?


Solution

  • For all packages that are listed under

    Directly importable packages

    (The dialog you see in the screenshot opens by clicking on the info icon on the bottom right corner)

    Directly imported packages

    you can simply import them by adding the respective import statement to the top of your DartPad code. Here's an example for GoogleFonts:

    import 'package:flutter/material.dart';
    // simply add this line to import GoogleFonts
    import 'package:google_fonts/google_fonts.dart';
    
    const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(
            scaffoldBackgroundColor: darkBlue,
          ),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: Center(
              child: MyWidget(),
            ),
          ),
        );
      }
    }
    
    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Text(
          'This is Google Fonts',
          // Use the package wherever you like
          style: GoogleFonts.lato(
            textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
          ),
        );
      }
    }