Netlify Build command script to deploy a Flutter Web App

flutter-netlify-build.sh

#!/bin/sh
FLUTTER_BRANCH=`grep channel: .metadata | sed 's/  channel: //g'`
FLUTTER_REVISION=`grep revision: .metadata | sed 's/  revision: //g'`

git clone https://github.com/flutter/flutter.git
cd flutter
git checkout $FLUTTER_BRANCH
git pull origin $FLUTTER_BRANCH
git checkout $FLUTTER_REVISION
cd ..

flutter/bin/flutter config --enable-web
flutter/bin/flutter build web

netlify.toml

[build]
  command = "./flutter-netlify-build.sh"
  publish = "build/web"

FLUTTER_BRANCH and FLUTTER_REVISION are pulled from the flutter projects .metadata file. This is used to checkout the same branch and commit that you are using in development in order to run flutter build web. At the time of this writing Flutter Web is in beta and the beta branch will be checked out, then the specific revision.

The netlify.toml file is used to tell Netlify how to build your project and where to find the published files.

Make sure to make your flutter-netlify-build.sh file user executable with chmod u+x flutter-netlify-build.sh so that Netlify can execute your build command.

Richard, thanks for the script.

Would you know how to enforce the higher Dart SDK version?

3:58:51 PM: Running "flutter pub get" in repo...
3:58:52 PM: The current Dart SDK version is 2.6.0-dev.5.0.flutter-d6c6d12ebf.
3:58:52 PM: Because project requires SDK version >=2.6.0 <3.0.0, version solving failed.
3:58:52 PM: pub get failed (1)

@radeksvarz Try updating your pubspec.yaml file. That is where your versions are defined.

@richard-flosi I do have sdk: ">=2.6.0 <3.0.0" in the pubspec.yaml file as I need to have Dart SDK >= 2.6.

The question is how to convince Netlify's docker image to get the proper Dart version.

@radeksvarz Flutter comes bundled with Dart, I would recommend using the bundled version of Dart.

My build script has changed since this post and looks more like this now:

#!/bin/bash

# Setup flutter
FLUTTER=`which flutter`
if [ $? -eq 0 ]
then
  # Flutter is installed
  FLUTTER=`which flutter`
else
  # Get flutter
  git clone https://github.com/flutter/flutter.git
  FLUTTER=flutter/bin/flutter
fi

# Configure flutter
FLUTTER_CHANNEL=beta
FLUTTER_VERSION=v1.17.0
$FLUTTER channel $FLUTTER_CHANNEL
$FLUTTER version $FLUTTER_VERSION
$FLUTTER config --enable-web

# Setup dart
DART=`echo $FLUTTER | sed 's/flutter$/cache\/dart-sdk\/bin\/dart/'`
echo $DART

# e.g. Run a dart command
$DART foo/bar.dart

# Build flutter for web
$FLUTTER build web

echo "OK"

Notice how I'm getting the path and setting a DART variable which is then used to run dart commands.

i.e. By getting Flutter, you are already getting Dart and you should use that.

Hope this helps.

@richard-flosi It looks promising. Thanks.

I have tried that now and it looks like Netlify is still enforcing its Dart instead of Flutter's one.

This is the updated code:

#!/bin/bash
FLUTTER_BRANCH=`grep channel: .metadata | sed 's/  channel: //g'`
FLUTTER_REVISION=`grep revision: .metadata | sed 's/  revision: //g'`

# Setup flutter
FLUTTER=`which flutter`
if [ $? -eq 0 ]
then
  # Flutter is installed
  FLUTTER=`which flutter`
else
  # Get flutter
  git clone https://github.com/flutter/flutter.git
  FLUTTER=flutter/bin/flutter
fi

cd flutter
git checkout $FLUTTER_BRANCH
git pull origin $FLUTTER_BRANCH
git checkout $FLUTTER_REVISION
cd ..

$FLUTTER config --enable-web

# Setup dart
DART=`echo $FLUTTER | sed 's/flutter$/cache\/dart-sdk\/bin\/dart/'`
echo $DART

$FLUTTER build web --release

with the result

6:30:04 PM: Downloading Dart SDK from Flutter engine 7d90779bb66f2c63444ee41b61c2d9a1c7b389ca...
...
6:30:12 PM: Building flutter tool...
6:32:29 PM: Setting "enable-web" value to "true".
6:32:29 PM: flutter/bin/cache/dart-sdk/bin/dart
6:32:30 PM: Downloading Material fonts...
...
6:32:35 PM: Running "flutter pub get" in repo...
6:32:35 PM: The current Dart SDK version is 2.6.0-dev.5.0.flutter-d6c6d12ebf.
6:32:35 PM: Because project requires SDK version >=2.6.0 <3.0.0, version solving failed.
6:32:35 PM: pub get failed (1)

What's in your .metadata file?
Are FLUTTER_BRANCH and FLUTTER_REVISION set right?
I'm not using this methodology anymore. The idea here was to parse .metadata from flutters output. I'm using a fixed version at this point.

I'm not sure exactly what is happening for you. Also, make sure that you clear the cache and retry the build in Netlify and maybe add some logging so you know if it's using a cached version of flutter or installing it from git clone.

I like your first approach of checking the metadata file as it reflects what I set as needed on one place.

I believe the metadata part is ok.

.metadata file:

# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled and should not be manually edited.

version:
  revision: 682e6383aca3996644a5e5645089bbc8b6bf14c5
  channel: master

project_type: app

Thanks for tip on the logging. I will dig further into in.

@richard-flosi You were right! The issue is in the .metadata file as it was not updated reflecting the current flutter version on dev.

My apologies.

For others fighting with this.

.metadata file is not updated by flutter upgrade command.

I initially thought it reflects the current flutter version, which is not the case as it rather reflects the version of flutter at the time the project was created.

Looking around I honestly cannot find where the up to date project's flutter version is identified.

What's in your .metadata file?
Are FLUTTER_BRANCH and FLUTTER_REVISION set right?
I'm not using this methodology anymore. The idea here was to parse .metadata from flutters output. I'm using a fixed version at this point.

I'm not sure exactly what is happening for you. Also, make sure that you clear the cache and retry the build in Netlify and maybe add some logging so you know if it's using a cached version of flutter or installing it from git clone.

Can you please share your new methodology

Here is the build script I just used to launch a new flutter web site on netlify:

build.sh

#!/bin/bash

# Get flutter
git clone https://github.com/flutter/flutter.git
FLUTTER=flutter/bin/flutter

# Configure flutter
FLUTTER_CHANNEL=master
FLUTTER_VERSION=v1.17.0
$FLUTTER channel $FLUTTER_CHANNEL
$FLUTTER version $FLUTTER_VERSION
$FLUTTER config --enable-web

# Build flutter for web
$FLUTTER build web

echo "OK"

@shadowdogg

Can you please share your new methodology?

I created a new gist to demonstrate here:
https://gist.github.com/richard-flosi/766040cec9bd2ea5da7a33bc01706de4

Hi there ! I'm pretty new to Flutter Web and Netlify and was wondering if perhaps you knew any resources that could explain this process ! How-to setup netlify with build scripts !

@Gene-Dana Try Netlify: Get started with build configuration

how can i generate .g.dart files while deploying??

how can i generate .g.dart files while deploying??

I'm not sure myself, but it looks like this issue may address your question: google/json_serializable.dart#581

See comment here: google/json_serializable.dart#581 (comment)

How to fix this error: 12:18:29 PM: Exception: Failed to compile application for the Web.
12:18:29 PM: ​
12:18:29 PM: build.command failed
12:18:29 PM: ────────────────────────────────────────────────────────────────
12:18:29 PM: ​
12:18:29 PM: Error message
12:18:29 PM: Command failed with exit code 1: if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release (https://ntl.fyi/exit-code-1)
12:18:29 PM: ​
12:18:29 PM: Error location
12:18:29 PM: In Build command from Netlify app:
12:18:29 PM: if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
12:18:29 PM: ​
12:18:29 PM: Resolved config
12:18:29 PM: build:
12:18:29 PM: command: if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
12:18:29 PM: commandOrigin: ui
12:18:29 PM: environment:
12:18:29 PM: - REVIEW_ID
12:18:29 PM: publish: /opt/build/repo/build/web
12:18:29 PM: publishOrigin: ui
12:18:31 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:18:31 PM: Failing build: Failed to build site
12:18:32 PM: Finished processing build request in 1m21.142s

@fisforfaheem This example is pretty old now and it looks like Netlify is reporting your build failed. I'd probably work on getting the build to work locally first and there is probably a better way to do this now. Have you read through the Flutter web docs here? https://docs.flutter.dev/platform-integration/web/building

yes did all the stuff no luck [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 07/02/23, 02:12:27 AM

…

On Sat, Jul 1, 2023 at 1:54 AM Richard Flosi ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @fisforfaheem <https://github.com/fisforfaheem> This example is pretty old now and it looks like Netlify is reporting your build failed. I'd probably work on getting the build to work locally first and there is probably a better way to do this now. Have you read through the Flutter web docs here? https://docs.flutter.dev/platform-integration/web/building — Reply to this email directly, view it on GitHub <https://gist.github.com/richard-flosi/8b43c06732d296f1145b8f5d12bf194e#gistcomment-4615611> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRXJSDOUBBHL4TID3PJWALXN44HJBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTAMBQHA2TGMRXU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you were mentioned. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

i tried