How do I add an Example Project to a Flutter Package?

user_6325119 0
Viewed 5835

Is there a way to autogenerate template code for the example map structure in a package?

Most packages have a /example folder within the package root that showcases the package functionality. I'm not sure what's the "best" way to create the example is, or if it even matter.

Do I create all files individually? Do I create a new project and then copy it to the package root? Can I autogenerate an example project directly in the project?

It's my first attempt on creating a package and I want to get it right the first time.

dart-pub flutter-dependencies dart flutter
4 Answers

To create a Flutter package with an Example in Android Studio

  1. Create a new Flutter Project enter image description here
  2. Select Flutter Package enter image description here
  3. After the new project opens in Android Studio, select the "Terminal" tab and then run:

flutter create example

enter image description here

  1. Select "Edit Configuration"-> add configuration -> Select the main.dart file that is located in the example/lib folder enter image description here enter image description here enter image description here enter image description here

  2. Open your example pubspec.yaml and link to the library by adding:

    your_package_name: path: ..\ enter image description here

NOTE: When you open the Example folder it will look like an entire Flutter app nested into your project; that's because it is. Just open the io and android folders to see that they share that pattern: enter image description here

user_29799550

Create a new project inside the root directory of your project called example and then remove unnecessary files such as CHANGELOG, LICENSE and README as they will be in your package folder.

Here's an example (no pun intended) with a package that I created:

enter image description here enter image description here

Now in pubspec.yaml you should include your package as dev dependency like this:

dev_dependencies:
  your_package:
    path: ../

I believe you can also use regular dependencies, but this worked for me.

Now inside /lib you can add a main.dart file, import your package and then create an example project.

user_56983550

Go to your project root folder and run flutter create example.
Thats it.

user_63251190

Use the built-in flutter command-line tool in the root directory of the project to do all the work:

/e/projects/myproject # flutter create example

which has this output:

Creating project example... androidx: true
  example\.gitignore (created)
  example\.idea\libraries\Dart_SDK.xml (created)
  example\.idea\libraries\Flutter_for_Android.xml (created)
  example\.idea\libraries\KotlinJavaRuntime.xml (created)
  example\.idea\modules.xml (created)
  example\.idea\runConfigurations\main_dart.xml (created)
  example\.idea\workspace.xml (created)
  example\.metadata (created)
  example\android\app\build.gradle (created)
  example\android\app\src\main\kotlin\com\example\example\MainActivity.kt (created)
  example\android\build.gradle (created)
  example\android\example_android.iml (created)
  example\android\.gitignore (created)
  example\android\app\src\debug\AndroidManifest.xml (created)
  example\android\app\src\main\AndroidManifest.xml (created)
  example\android\app\src\main\res\drawable\launch_background.xml (created)
  example\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  example\android\app\src\main\res\values\styles.xml (created)
  example\android\app\src\profile\AndroidManifest.xml (created)
  example\android\gradle\wrapper\gradle-wrapper.properties (created)
  example\android\gradle.properties (created)
  example\android\settings.gradle (created)
  example\ios\Runner\AppDelegate.swift (created)
  example\ios\Runner\Runner-Bridging-Header.h (created)
  example\ios\Runner.xcodeproj\project.pbxproj (created)
  example\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
  example\ios\.gitignore (created)
  example\ios\Flutter\AppFrameworkInfo.plist (created)
  example\ios\Flutter\Debug.xcconfig (created)
  example\ios\Flutter\Release.xcconfig (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  example\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  example\ios\Runner\Base.lproj\Main.storyboard (created)
  example\ios\Runner\Info.plist (created)
  example\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
  example\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  example\lib\main.dart (created)
  example\example.iml (created)
  example\pubspec.yaml (created)
  example\README.md (created)
  example\test\widget_test.dart (created)
Running "flutter pub get" in example...                             3.0s
Wrote 68 files.

All done!
[√] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 6.1.7601], locale en-US)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.2)
[√] Android Studio: is fully installed. (version 3.5)
[√] Connected device: is fully installed. (2 available)

In order to run your application, type:

  $ cd example
  $ flutter run

Your application code is in example\lib\main.dart.

If using Android Studio 3.5.2, run the default example for assurance:

  1. Add a new configuration for the example main.dart by selecting Edit Configurations... from the Flutter drop-down on the toolbar.

  2. Select the Flutter directory on the left of the Run/Debug Configurations dialog and press the + button.

  3. Select Flutter

  4. Browse for main.dart in the new example/lib directory by clicking the file folder in the Dart entrypoint: dialog.

  5. Click the triangle run button on the toolbar.

I just performed these steps for my own project and it worked perfectly.

Then, to customize for your project, edit the example's pubspec.yaml file and add a dependency to your project:

dependencies:
  my_project:
    path: ../
user_2391710
Related