Category: Flutter

GitLab CI + Flutter: pub: command not found

Posted by
Flutter  /  GitLab  /  Leave a comment Tags: , ,

In one of my projects, I used a GitLab environment to perform Flutter tests. For this, I setup my .gitlab-ci.yaml to use a Flutter docker image of cirrusci/flutter for code quality check or tests. The file looks like this:

code_quality:
  stage: test
  image: "cirrusci/flutter:stable"
  tags:
    - docker
  before_script:
    - pub global activate dart_code_metrics
    - export PATH="$PATH":"$HOME/.pub-cache/bin"
  script:
    - metrics lib -r codeclimate  > gl-code-quality-report.json
      
# [...]

test:
  stage: test
  image: "cirrusci/flutter:stable"
  tags:
    - docker
  before_script:
    - pub global activate junitreport
    - export PATH="$PATH":"$HOME/.pub-cache/bin"
  script:
    - flutter test --machine --coverage | tojunit -o report.xml
    - lcov --summary coverage/lcov.info
    - genhtml coverage/lcov.info --output=coverage

# [...]

Up to version 2.10.* of the Flutter docker image, this worked fine. But starting with version 3.0.0, there seems to be some changes in the binaries or their paths. The scripts failed with an error:

/usr/bin/bash: line 123: pub: command not found

To fix this error, the pub commands need to be adjusted and set to flutter pub:

# [...]

  before_script:
    - flutter pub global activate dart_code_metrics

# [...]

  before_script:
    - flutter pub global activate junitreport

# [...]

This fixed the issue and all tests finished successfully.

 

Build and Release a Flutter App

Posted by
Android  /  Flutter  /  iOS  /  Leave a comment Tags: , ,

Updating the app’s version number

To update the version number, navigate to the pubspec.yaml file and update the following line with the current version string:

version: 1.0.0+1

After the change, run:

flutter pub get

Build and release the iOS app

A detailled description of the whole process is described at docs.flutter.dev.

To release the iOS app, you use Flutter to build a xcarchive file. This build archive can be published the same way you would do it with Xcode by using the archive manager and one of the different Distribution options.

Build the iOS app:

flutter build ipa

The generated xcarchive file is saved to your app directory under:

/build/ios/archive/MyApp.xcarchive

Build and release the Android app

A detailled description of the whole process is described at docs.flutter.dev.

To release the Android app, you use Flutter to build a app bundle aab file. This file can be distributed by using Google Play Console or any other store.

Build the Android app:

flutter build appbundle

The generated aab app bundle file is saved to your app directory under:

/build/app/outputs/bundle/release/MyApp.aab

Photo by Artur Shamsutdinov on Unsplash

 

Flutter: rounded corners for images

Posted by
Flutter  /  Leave a comment Tags:

There are different possibilities to create a rounded corner of images:

BoxDecoration

To create a rounded corner image in Flutter, you can use the Container widget and set the decoration property to a BoxDecoration with a borderRadius that defines the rounded corners. Here’s an example:

Container(
  height: 100.0,
  width: 100.0,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.cover, 
      image: NetworkImage('https://example.com/image.jpg'),
    ),
    borderRadius: BorderRadius.circular(10.0),
  ),
),

In this example, the width and height properties of the Container define the size of the image, the DecorationImage property defines the image source and how it should be scaled to fit the container and the borderRadius property is used to create the rounded corners with a Radius.circular(10).

ClipRRect

You can also use ClipRRect widget to create rounded corner Image in flutter.

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.network(
    'https://example.com/image.jpg',
    height: 100.0,
    width: 100.0,
    fit: BoxFit.cover,
  ),
),

You can adjust the radius value as per your need.

Photo by Chaitanya Tvs on Unsplash

Flutter: enable scroll-to-top for nested Scaffolds (e.g. in IndexedStack)

Posted by
Flutter  /  Leave a comment Tags: , ,

When using nested Scaffolds (e.g. in combination with IndexedStack), the PrimaryScrollController is not usable by default. An IndexedStack will load all subviews so scroll-to-top will change all scrollable views at the same time, even if they are not visible or it simply does not work, because the PrimaryScrollController can only be attached to a single Scaffold.

To overcome this issue, the scrolls_to_top package can be used. This also works for nested Scaffolds. The functionality of the package is described in this post (here is the english translation).

The following code example shows the usage. This is how to use ScrollsToTop within each children of IndexedStack:

  final _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      primary: true,
      body: ScrollsToTop(
        onScrollsToTop: (event) {
          // onScrollsToTop will be called on each touch event, so check if the view is currently visible
          if (!widget.isOnScreen) return;

          _scrollController.animateTo(
            event.to,
            duration: event.duration,
            curve: event.curve,
          );
        },
        child: ListView.builder(
          itemBuilder: _itemBuilder,
          itemCount: 100,
          controller: _scrollController,
        ),
      ),
    );
  }

Flutter: add drag handle to ReorderableListView

Posted by
Flutter  /  Leave a comment Tags: , ,

By default, ReorderableListView only shows drag handles on desktop (GitHub). To enable a drag handle inside a ReorderableListView, it is possible to add the following code into the child’s subtree:

ReorderableDragStartListener(
  index: index,
  child: const Icon(Icons.drag_handle),
),

A full example usage with a very simple list:

var moviesTitles = ['Inception', 'Heat', 'Spider Man'];

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    // Handle reorder
  },
  children: moviesTitles.map((movie) {
    var index = moviesTitles.indexOf(movie);
    return ListTile(
      key: Key('${index}'),
      tileColor: Colors.white,
      title: Text(movie),
      trailing: ReorderableDragStartListener(
        index: index,
        child: const Icon(Icons.drag_handle),
      ),
      onTap: () {
        // Handle tap
      },
    );
  }).toList(),
);

This will result in the following output:

Flutter: expand TextField height to match parent widget

Posted by
Dart  /  Flutter  /  Leave a comment Tags: , ,

To expand the height of TextField to match the parents widgets height, the following code can be used:

Container(
  height: 500.0,
  child: TextField(
    expands: true,
    minLines: null,
    maxLines: null,
    ...
  ),
),

The important thing is, that both minLines and maxLines need to be set to null.

To set the height of the Container to match it’s parent or even the complete screen, height can be set to double.infinity.

Flutter on iOS: themeMode does not change to dark mode if `ThemeMode.system` is used

Posted by
Dart  /  Flutter  /  Leave a comment Tags: ,

In my case, a simple app should automatically use the theme (light or dark) of the system to style the user interface. By default, this should work when using ThemeMode.system (see flutter documentation). But it didn’t.

The themes have been defined as follows:

    return MaterialApp(
      themeMode: ThemeMode.system,
      theme: ThemeData( ... ),
      darkTheme: ThemeData( ...),
      ...
    );

In addition, the WidgetsBindingObserver callback didChangePlatformBrightness() was never called. It was defined as follows:

class MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver
{
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    print(WidgetsBinding.instance.window.platformBrightness);
    // > should print Brightness.light / Brightness.dark when you switch
    super.didChangePlatformBrightness();
  }
}

After hours and days of searching, it turned out, that the following definition was set in info.plist of iOS:

<key>UIUserInterfaceStyle</key>
<string>Light</string>

Removing this line solved the issue. This setting sets the apps theme to Light, which results in a constant value even if the user changed the brightness to dark. Without this line, UIUserInterfaceStyle depends on the global setting.

Source: https://stackoverflow.com/questions/61620332/platform-brightness-is-still-light-on-ios-even-when-dark-mode-is-on-flutter

fatal error: ‘Flutter/Flutter.h’ file not found

Posted by
Dart  /  Flutter  /  Leave a comment Tags:

After switching the flutter channel to beta and back to stable, my app did not compile anymore. The compilation stopped with the error:

fatal error: 'Flutter/Flutter.h' file not found

Multiple flutter clean and channel switches did not work in this case.

The following commands fixed this behavior:

rm ios/Flutter/Flutter.podspec
flutter clean

See: https://github.com/flutter/flutter/issues/70895#issuecomment-744734693