DEV Community: Offline Programmer

Learn about Amplify API GraphQL Model Helper For Flutter

Offline Programmer — Thu, 31 Mar 2022 16:37:22 +0000

AWS Amplify is a set of tools and services that enables mobile and front-end web developers to build secure, scalable full-stack applications powered by AWS. Amplify recently released a new enhancement for the API category to improve the GraphQL experience by allowing developers to use the codegen models to quickly generate request objects for queries, mutations, and subscriptions. The responses will then be automatically parsed into instances of the model.

Let’s demonstrate this by building an expense tracker app where users can manage their expenses by recording, editing, deleting, and categorizing them into buckets. We will use the Amplify Authenticator UI library to quickly create an authentication flow so we can focus on the core functionality of our app. Once the authentication is done, we will show a homepage with two floating buttons to create expenses and categories.

Prerequisites

Install and configure Amplify CLI
A Flutter application targeting Flutter SDK >= 2.0.0 (stable version) with Amplify libraries integrated
An iOS configuration targeting at least iOS 11.0
An Android configuration targeting at least Android API level 21 (Android 5.0) or above

Authentication Flow

The Authenticator will add complete authentication flows to the App. All we need to do is wrap the MaterialApp widget with the Authenticator widget. Yes, it is that easy!!

Data Modeling

We will use two data models for our Graphql schema: ExpenseItem & ExpenseCategory. The ExpenseCategory can have multiple ExpenseItems i.e., 1:n relation. The owner-based auth we are using for this schema will allow each user only to see the expenses/categories they made.

Run the command below to generate the models files. They will be placed under the lib/models directory.

Create, update, delete data

We created a service to implement the CRUD functions for the models. We will run GraphQL mutation with Amplify.API.mutate to create, update and delete the data. We will fetch the data using Amplify.API.query

The Widget Tree

The App UI widgets will collect the required information to create, update & delete the expense items & categories, then call the corresponding API service methods.

We organized the files according to their functionality/type. We have a single page for the App in the pages folder. We are using the widgets folder for the widgets we created to handle the UI of Adding/Updating/Deleting the expense items and categories. The UI uses the APIService in the services folder for integrating with Amplify API category for the CRUD operations. The amplify codegen models command will generate the models files and place them in the models folder.

Run the App

We packed the code with cool concepts and ideas. We used multiple widgets/files to make things easier to read. We tried to follow best practices to produce a modular, testable & maintainable code. The App code is here

offlineprogrammer / amplify_expense_tracker

amplify_expense_tracker

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

In order to run this app:

Pull down the code by running:

git clone https://github.com/offlineprogrammer/amplify_expense_tracker.git

Create your amplify environment for this app (includes authentication and GraphQL API with owner authentication).

amplify init

Build all your local backend resources and provision it in the cloud.

amplify push

Install dependencies

flutter pub get

Run in simulator

flutter run -d iPhone

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Let’s go step by step through how to run this App.

Learn more
You can use the following resources to learn more and get help regarding AWS Amplify:

🎬 Authentication Using the AWS Amplify Authenticator UI library
🚀 Amplify Flutter Github
📜 Amplify Docs
💬 Amplify Discord Community

Thank you. 👋🏻

Cover image Brett Jordan on Unsplash

How To Add Authentication To Your Flutter App In Few Minutes

Offline Programmer — Mon, 24 Jan 2022 04:10:41 +0000

Learn how to use the Amplify Authenticator UI library for Flutter to quickly create an authentication flow within your app.

Links mentioned in the video:

🔗 AWS Amplify Docs: https://docs.amplify.aws/lib/q/platform/flutter/
🔗 AWS Amplify Studio: https://sandbox.amplifyapp.com/getting-started

offlineprogrammer / amplify_auth_easy

amplify_auth_easy

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Cover image Pablo Arroyo on Unsplash

How to contribute to Amplify Flutter

Offline Programmer — Mon, 25 Oct 2021 17:36:01 +0000

Have you thought about contributing to an open-source project? Contributing is a great way to learn more new technologies and ecosystems and make constructive, helpful bug reports, feature requests, and the noblest of all contributions: a good, clean pull request. It builds your resume by demonstrating that you can collaborate with others on code, and It feels good to give back to a project you use!

Prerequisites

A GitHub account you can create here https://github.com/join
Flutter Development environment https://flutter.dev/docs/get-started/install
IDE (e.g. Android Studio or VSCode) combined with Flutter command-line tools https://flutter.dev/docs/get-started/editor?tab=vscode

Dev Environment Setup

Step 1: Fork the aws-amplify/amplify-flutter repo by clicking on the fork button on the top right of this page (https://github.com/aws-amplify/amplify-flutter). This will create a copy of this repository in your GitHub account.

GitHub keeps track of the relationship between your repo and the one you have forked it from. You can think of your repo as a working copy.

Step 2: Open VSCode and clone your fork down to your machine so you can begin making changes form

This will open up a File Explorer where you can then choose where the Git repository should be stored.

Step 3: You will need to install melos for dependency management. Run the commands below in the VSCode terminal

$ flutter pub global activate melos
$ melos bootstrap

Step 4: Let’s run the example app. To do that, you need to include your amplifyconfiguration.dart file in the lib folder. Follow the guide here (https://docs.amplify.aws/console/adminui/start/) to create an app and then pull it into the example app by running the command below

amplify pull --appId <Your_AppId> —envName <Your_App_Env>

Setup the following categories for the example app

Amplify Authentication https://docs.amplify.aws/lib/auth/getting-started/q/platform/flutter/
Amplify Analytics https://docs.amplify.aws/lib/analytics/getting-started/q/platform/flutter/
Amplify Storage https://docs.amplify.aws/lib/storage/getting-started/q/platform/flutter/

Run the example app once you complete the setup & configurations.

Congratulations, Your development environment is ready.

Contributing to the Repo

Use one of the commands below to create a new branch within your fork

git checkout -b "group-token/short-token-[branch-name]"

git checkout -b "short-token/[branch-name]"

Use the group-token to indicate the category you are working on. e.g. amplify-datastore. short-token can be one of the following

feat
chore
bug

Your code needs to conform to the style guides, code patterns standards of the Amplify Flutter repos. We recommend following the Effective Dart coding conventions: https://dart.dev/guides/language/effective-dart or respective Swift and Kotlin conventions. Use inline docs where appropriate to explain your code and use the dartdoc conventions (https://dart.dev/guides/language/effective-dart/documentation) to document the new APIs. Note that the linter rules used for Amplify Flutter are derived from the Dart team's lints (https://pub.dev/packages/lints ) package and the Flutter team's flutter_lints (https://pub.dev/packages/flutter_lints).

Make sure to cover the new logic with enough unit tests to pass the target coverage of our CI/CD pipeline. Each packages/[category] contains the following for testing:

example folder with a Dart test app for integration testing that specific category. To run these apps, you must include your amplifyconfiguration.dart file in the lib folder.
iOS unit tests live alongside the example app in the ios/unit_tests folder
android/src/test/kotlin/.... Test.kt file, where we write the Android unit tests.
test/ ... test.dart file, where we write the Dart unit tests.

We highly recommend updating the example app to use your new changes (if applicable) and to build the app on iOS and Android.

Creating PR

Once you commit your work, push your branch

git push -u origin <branch-name>

You might get the error below about missing upstream branch

fatal: The current branch <branch-name> has no upstream branch.
To push the current branch and set the remote as upstream, use

git push --set-upstream origin <branch-name>

In this case you need to use the command bellow to push your branh

git push --set-upstream origin <branch-name>

Return to your fork on GitHub, and refresh the page to see your recently pushed branch.

Click on (Compare & pull request)to submit the PR template.

The Amplify team will review your PR and provide feedback if needed. make sure to address any automated check that fails (such as linting, unit tests, etc. in CI). Finally, once your changes meet the requirements and checks, the team will merge your changes into the repo.

Well done. We are very excited about your contributions!

Check our contributing guidelines (https://github.com/aws-amplify/amplify-flutter/blob/main/CONTRIBUTING.md) to learn more.

Cover image Yancy Min on Unsplash

Flutter & Dart Tips - Week In Review #17

Offline Programmer — Sun, 03 Oct 2021 02:39:50 +0000

Hello Reader,

This is it. This post is the last one of the weekly Flutter\Dart tips series. By the end of this post, The number of tips I shared with you will be more than 100 tips. Thanks for following me to this point.

1- LongPressDraggable Widget is used to create a widget that can be dragged starting from LongPress.


...

          LongPressDraggable(
            feedback: FlutterLogo(
              textColor: Colors.orange,
              size: 100,
              style: FlutterLogoStyle.stacked,
            ),
            child: FlutterLogo(
              textColor: Colors.green,
              size: 100,
              style: FlutterLogoStyle.stacked,
            ),
            onDragEnd: (details) {
              setState(() {
                final adjustment = MediaQuery.of(context).size.height -
                    constraints.maxHeight;
                _offset = Offset(
                    details.offset.dx, details.offset.dy - adjustment);
              });
            },
          ),

...

2- Baseline is a widget that positions its child according to the child's baseline.


...

    Center(
      child: Container(
        color: Colors.blue,
        height: 120.0,
        width: 120.0,
        child: Baseline(
          child: Container(
            color: Colors.red,
            height: 60.0,
            width: 60.0,
          ),
          baseline: 20.0,
          baselineType: TextBaseline.alphabetic,
        ),
      ),
    )

...

3- Banner widget displays a diagonal message above the corner of another widget.


...

    Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        color: Colors.yellow,
        height: 100,
        child: ClipRect(
          child: Banner(
            message: "hello",
            location: BannerLocation.topEnd,
            color: Colors.red,
            child: Container(
              color: Colors.yellow,
              height: 100,
              child: Center(
                child: Text("Hello, banner!"),
              ),
            ),
          ),
        ),
      ),
    )

...

4- BottomNavigationBar is a widget that's displayed at the bottom of an app for selecting among a small number of views, typically between three and five.


...

      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),

...

5- IntrinsicWidth is a widget that sizes its child to the child's maximum intrinsic width.


...

 IntrinsicWidth(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: 200,
          height: 100,
          color: Colors.teal,
        ),
        Expanded(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ],
    ),
  )
...

6- IntrinsicHeight Widget is a widget that sizes its child to the child’s intrinsic height.


...

  IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: 150,
          height: 100,
          color: Colors.teal,
        ),
        Container(
          width: 150,
          height: 200,
          color: Colors.red,
        )
      ],
    ),
  )
...

Thank you. 👋🏻

Cover image Ray Hennessy on Unsplash

Flutter & Dart Tips - Week In Review #16

Offline Programmer — Sat, 25 Sep 2021 23:15:35 +0000

Hello Reader,

I am getting very close to the goal of this series of sharing 100+ Flutter\Dart tips. Let's get into the 16th post of this.

1- Transform is a widget that applies a transformation before painting its child.


...

  Container(
  color: Colors.black,
  child: Transform(
    alignment: Alignment.topRight,
    transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFFE8581C),
      child: const Text('Apartment for rent!'),
    ),
  ),
)

...

2- VerticalDivider widget is a one device pixel thick vertical line, with padding on either side.


...


Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Container(
      child: Text('Item1')
    ),
    VerticalDivider(),
    Container(
      child: Text('Item2'),
    ),
    VerticalDivider(),
    Container(
      child: Text('Item3'),
    ),
  ],
)

...

3- TimePicker widget shows a dialog containing a material design time picker.


...


Future<TimeOfDay> selectedTime = showTimePicker(
  initialTime: TimeOfDay.now(),
  context: context,
);

...

4- Stepper widget displays progress through a sequence of steps.


...


    Stepper(
          steps: [
            Step(
              title: new Text('Login Info'),
              content: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Email Address'),
                  ),
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Password'),
                  ),
                ],
              ),
              isActive: true,
              state: StepState.editing
            ),
          ],
        )

...

5- ActionChip widget used to create compact elements called chips, which trigger an action when the user presses on it.


...


  ActionChip(
    label: Text('Delete'),
    onPressed: () {
      print('Processing to delete item');
    }
  )

...

6- ExpansionPanel widget is a panel with a header and a body and can be either expanded or collapsed. The body of the panel is only visible when it is expanded.


...


        ExpansionPanel(
          headerBuilder: (context, isExpanded) {
            return ListTile(
              title: Text(
                'Click To Expand',
                style: TextStyle(color: Colors.black),
              ),
            );
          },
          body: ListTile(
            title: Text('Description text',
                style: TextStyle(color: Colors.black)),
          ),
          isExpanded: _expanded,
          canTapOnHeader: true,
        ),

...

See you next week. 👋🏻

Cover image XPS on Unsplash

Flutter & Dart Tips - Week In Review #15

Offline Programmer — Sat, 18 Sep 2021 22:54:16 +0000

Hello Reader,

Welcome to the 15th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.

1- RadioListTile widget is a radio button with a label.


...

        RadioListTile<SingingCharacter>(
          title: const Text('Thomas Jefferson'),
          value: SingingCharacter.jefferson,
          groupValue: _character,
          onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
      ),

...

2- RangeSlider widget is used to select a range from a range of values.


...

      RangeSlider(
      values: _currentRangeValues,
      min: 0,
      max: 100,
      divisions: 5,
      labels: RangeLabels(
        _currentRangeValues.start.round().toString(),
        _currentRangeValues.end.round().toString(),
      ),
      onChanged: (RangeValues values) {
        setState(() {
          _currentRangeValues = values;
        });
      },
    );

...

3- RefreshIndicator is a widget that supports Material's swipe-to-refresh.


...

        RefreshIndicator(
          onRefresh: () async {
            return await Future.delayed(Duration(seconds: 3));
          },
          child: ListView(
            padding: const EdgeInsets.all(8.0),
            children: <Widget>[
              Container(
                height: 50,
                color: Colors.amber[600],
                child: const Center(child: Text('Entry A')),
              ),
              Container(
                height: 50,
                color: Colors.amber[500],
                child: const Center(child: Text('Entry B')),
              ),
              Container(
                height: 50,
                color: Colors.amber[100],
                child: const Center(child: Text('Entry C')),
              ),
            ],
          ),
        ),

...

4- Switch widget is used to toggle the on/off state of a single setting.


...

          Switch(
            value: isSwitched,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
                print(isSwitched);
              });
            },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          ),

...

5- Tooltip widget helps explaining the function of a button or other user interface action.


...

    Tooltip(
      message: 'I am a Tooltip',
      child: Text('Hover over the text to show a tooltip.'),
    );

...

6- SelectableText Widget allows the user to Select/Copy the content on the UI.


...

  const SelectableText(
    'Hello! How are you?',
    textAlign: TextAlign.center,
    style: TextStyle(fontWeight: FontWeight.bold),
  )

...

See you next week. 👋🏻

Cover image UX Indonesia on Unsplash

Flutter & Dart Tips - Week In Review #14

Offline Programmer — Sun, 12 Sep 2021 01:03:21 +0000

Hello Reader,

In this 14th post of the Flutter & Dart Tips series, I will add six more tips to the 80 tips I shared since June of this year.

1- Flow is a widget which arranges its child widgets based on FlowDelegate


...

    Flow(
      delegate: FlowMenuDelegate(menuAnimation: menuAnimation),
      children:
          menuItems.map<Widget>((IconData icon) => flowMenuItem(icon)).toList(),
    )

...

2- You can fix Text Overflow error with Flexible Widget


...

      Flexible(
        child: Text(
          'Flutter Text Overflow while adding long text. how to wrap text in flutter ',
          style: TextStyle(fontSize: 20),
        ),
      )

...

3- CheckboxListTile is a widget that combines a checkbox and a list tile. It allows you to create a checkbox along with the title, subtitle, and icon.


...

  CheckboxListTile(
    value: _isChecked,
    onChanged: (bool value) {
      setState(() {
        _isChecked = value;
      });
    },
  )

...

4- LinearProgressIndicator widget is a material design linear progress indicator.


...

    LinearProgressIndicator(
      value: controller.value,
      semanticsLabel: 'Linear progress indicator',
    ),

...

5- PageView is a scrollable list that works page by page.


...

    PageView(
      children: <Widget>[
        Container(
          color: Colors.pink,
          child: Center(
            child: Text('Page 1'),
          ),
        ),
        Container(
          color: Colors.cyan,
          child: Center(
            child: Text('Page 2'),
          ),
        ),
        Container(
          color: Colors.deepPurple,
          child: Center(
            child: Text('Page 3'),
          ),
        ),
      ],
    )

...

6- PhysicalModel widget allows you to add custom shadow effects and customize its color and shape


...


    PhysicalModel(
      elevation: 6.0,
      shape: BoxShape.rectangle,
      shadowColor: Colors.black,
      color: Colors.white,
      child: Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: FlutterLogo(
          size: 60,
        ),
      ),
    )

...

See you next week. 👋🏻

Cover imageElena Mozhvilo on Unsplash

Flutter & Dart Tips - Week In Review #13

Offline Programmer — Sun, 05 Sep 2021 03:37:30 +0000

Hello Reader,

This is the 13th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week. My goal is to have at least 100 tips in this series.

1- Use GestureDetector to detect gestures like tap, double Tap, press, LongPress, pan, drag, zoom etc.


...

Container(
  color: _color,
  height: 200.0,
  width: 200.0,
  child: GestureDetector(
    onTap: () {
      setState(() {
        _color = Colors.yellow;
      });
    },
  ),
)

...

2- The AnimatedDefaultTextStyle will transitions the default text style over a given duration whenever the given style changes.


...

    AnimatedDefaultTextStyle(
      duration: Duration(milliseconds: 300),
      child: Text("Flutter"),
      style: newStyle,
    )

...

3- Use Future.delayed() to pause program flow for a certain duration.


...

  await Future.delayed(const Duration(seconds: 1));

...

4- Use DecoratedBoxTransition to animates the different properties of DecoratedBox.


...

       DecoratedBoxTransition(
        position: DecorationPosition.background,
        decoration: decorationTween.animate(_controller),
        child: Container(
          child: Container(
            width: 200,
            height: 200,
            padding: EdgeInsets.all(20),
            child: FlutterLogo(),
          ),
        ),
      ),

...

5- Use Divider widget to create a one pixel thick horizontal line, with padding on either side.


...

    ListTile(
      title: Text('Item1')
    ),
    Divider(),
    ListTile(
      title: Text('Item2'),
    ),
...

6- Use DropdownButton widget to create a button for selecting from a list of items.


...

        DropdownButton<String>(
          value: dropdownValue,
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: <String>['One', 'Two', 'Free', 'Four']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
...

See you next week. 👋🏻

Cover image Clem Onojeghuo on Unsplash

Flutter & Dart Tips - Week In Review #12

Offline Programmer — Sat, 28 Aug 2021 23:40:01 +0000

Hello Reader,

Welcome to the 12th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.

1- Use the Spacer Widget to create spacing between widgets.


...
        Container(
          color: Colors.red,
          height: 50,
          width: 50,
        ),
        Spacer(),
        Container(
          color: Colors.green,
          height: 50,
          width: 50,
        ),
        Spacer(),
...

2- FractionallySizedBox Widget is a widget that sizes its child to a fraction of the total available space.


...
      FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.25,
        child: RaisedButton(
          child: Text('Click Me'),
          color: Colors.red,
          textColor: Colors.white,
          onPressed: () {},
        ),
      ),
...

3- Use the AnimatedSwitcher widget to create animation when switching between two widgets.


...
          AnimatedSwitcher(
            duration: const Duration(milliseconds: 500),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(child: child, scale: animation);
            },
            child: Text(
              '$_count',
              key: ValueKey<int>(_count),
              style: Theme.of(context).textTheme.headline4,
            ),
          ),
...

4- Use the CupertinoAlertDialog to create an iOS-style widget that informs the user about situations that require acknowledgement.


...
        CupertinoAlertDialog(
              title: Text("This is the title"),
              content: Text("This is the content"),
              actions: [
                // Close the dialog
                // You can use the CupertinoDialogAction widget instead
                CupertinoButton(
                    child: Text('Cancel'),
                    onPressed: () {
                      Navigator.of(ctx).pop();
                    }),
                CupertinoButton(
                  child: Text('I agree'),
                  onPressed: () {
                    // Do something
                    print('I agreed');

                    // Then close the dialog
                    Navigator.of(ctx).pop();
                  },
                )
              ],
            )
...

5- Use CupertinoButton Widget to create an iOS-style button that Takes in a text or an icon that fades out and in on touch.


...
        Container(
          child: Center(
            child: CupertinoButton(
              onPressed: () {
                // Todo
              },
              child: Text("CupertinoButton Widget"),
            ),
          ),
        ),
        Container(
          child: Center(
            child: CupertinoButton.filled(
              onPressed: () {},
              child: Text("CupertinoButton Widget"),
            ),
          ),
        ),
...

6- The CupertinoActionSheet is an ios-themed widget that has action sheets design specifications.


...

           CupertinoActionSheet(
              title: Text(
                "Flutter dev",
                style: TextStyle(fontSize: 30),
              ),
              message: Text(
                "Select any action ",
                style: TextStyle(fontSize: 15.0),
              ),
              actions: <Widget>[
                CupertinoActionSheetAction(
                  child: Text("Action 1"),
                  isDefaultAction: true,
                  onPressed: () {
                    print("Action 1 is been clicked");
                  },
                ),
                CupertinoActionSheetAction(
                  child: Text("Action 2"),
                  isDestructiveAction: true,
                  onPressed: () {
                    print("Action 2 is been clicked");
                  },
                )
              ],
              cancelButton: CupertinoActionSheetAction(
                child: Text("Cancel"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            );
...

See you next week. 👋🏻

Cover image corey oconnell on Unsplash

Flutter & Dart Tips - Week In Review #11

Offline Programmer — Sat, 21 Aug 2021 21:09:07 +0000

Hello Reader,

In this 11th post of the Flutter & Dart Tips series, I will add six more tips to the 60+ tips I shared since June of this year.

1- The SlideTransition Widget animates the position of a widget relative to its normal position.


    SlideTransition(
      position: _offsetAnimation,
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: FlutterLogo(size: 150.0),
      ),
    )

2- The FadeTransition Widget fades a widget in and out by animating its opacity.


      FadeTransition(
        opacity: _animation,
        child: const Padding(padding: EdgeInsets.all(8), 
                             child: FlutterLogo(),),
      ),

3- The AnimatedCrossFade Widget cross-fades between two given children and animates itself between their sizes.


        AnimatedCrossFade(
              crossFadeState: _isFirst
                  ? CrossFadeState.showFirst
                  : CrossFadeState.showSecond,
              duration: const Duration(seconds: 1),
              firstCurve: Curves.easeInCubic,
              secondCurve: Curves.easeInCirc,
              firstChild: const FlutterLogo(
                  style: FlutterLogoStyle.horizontal, size: 100.0),
              secondChild: const FlutterLogo(
                  style: FlutterLogoStyle.stacked, size: 100.0),
        )

4- The CupertinoContextMenu Widget is a full-screen modal route that opens when the child is long-pressed.


        CupertinoContextMenu(
            child: Container(
              color: Colors.red,
            ),
            actions: <Widget>[
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
        ),

5- The BackdropFilter Widget applies a filter to the existing painted content.


          BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 10.0,
                sigmaY: 10.0,
              ),
              child: Container(
                color: Colors.black.withOpacity(0.2),
              ),
          ),

6- The RotatedBox Widget rotates its child by an integral number of quarter turns.


      RotatedBox(
        quarterTurns: 2,
        child: Text(
          'This is a Roated Text ',
          style: TextStyle(
            fontSize: 55,
            fontWeight: FontWeight.bold,
            letterSpacing: 0,
          ),
        ),
      )

See you next week. 👋🏻

Cover image Mufid Majnun on Unsplash

Flutter & Dart Tips - Week In Review #10

Offline Programmer — Sun, 15 Aug 2021 00:28:36 +0000

Hello Reader,

Welcome back to the 10th post of the Flutter & Dart Tips series.

Ten weeks ago, I started this series to share the tips I tweet during the week. My goal is to have at least 100 tips in this series.

1- LayoutBuilder helps to create a widget tree that can depend on the size of the parent widget.


      LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 750) {
          return Container(
            color: Colors.green,
            height: 100,
            width: 100,
          );
        } else {
          return Container(
            color: Colors.yellow,
            height: 100,
            width: 100,
          );
        }
      },
    );

2- The wrap is a widget that displays its children in horizontal or vertical runs. It will try to place each child next to the previous child on the main axis. If there is not enough space, it will create a new run adjacent to its existing children in the cross axis.


    Wrap(
      children: List.generate(
        10,
        (index) => Container(
          margin: const EdgeInsets.all(10),
          color: Colors.green,
          height: 100,
          width: 100,
        ),
      ),
    );

3- AnimatedIcon is a Flutter widget that animates the switching of an icon with other.


      AnimatedIcon(
          icon: AnimatedIcons.pause_play,
          size: 52,
          progress: myAnimation
      ),

4- The AnimatedContainer widget is a container widget with animations. It can be animated by altering the values of its properties.


    AnimatedContainer(
        width: _width,
        height: _height,
        decoration: BoxDecoration(
          color: _color,
          borderRadius: _borderRadius,
        ),
        duration: Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
      ),

5- The SliverAppBar is a widget that gives a floating app bar.


        SliverAppBar(
          pinned: _pinned,
          snap: _snap,
          floating: _floating,
          expandedHeight: 160.0,
          flexibleSpace: const FlexibleSpaceBar(
            title: Text('SliverAppBar'),
            background: FlutterLogo(),
          ),
        ),

6- AnimatedOpacity Widget automatically transitions the child’s opacity over a given duration whenever the given opacity changes.


        AnimatedOpacity(
          opacity: _opacity,
          duration: const Duration(seconds: 1),
          curve: Curves.bounceInOut,
          // The green box must be a child of the AnimatedOpacity widget.
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),

See you next week. 👋🏻

Cover image Ryan Quintal on Unsplash

Flutter & Dart Tips - Week In Review #9

Offline Programmer — Sat, 07 Aug 2021 22:25:47 +0000

Hello Reader,

Welcome to the 9th of the Flutter & Dart Tips series. My goal is to have at least 100 tips in this series. So far, I have shared with you 50 tips. Let's add more.

1- You can use the ShaderMask widget to apply a gradient look and feel to its child.


      body: Center(
        child: ShaderMask(
          blendMode: BlendMode.srcIn,
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              colors: [Colors.red, Colors.green],
              tileMode: TileMode.clamp,
            ).createShader(bounds);
          },
          child:
              const Text('This is a colorful Text', style: TextStyle(fontSize: 36)),
        ),
      ),

2- AnimatedSize is a widget that automatically transitions its size over a given duration whenever the given child's size changes.


class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin {
  double _size = 50.0;
  bool _large = false;

  void _updateSize() {
    setState(() {
      _size = _large ? 250.0 : 100.0;
      _large = !_large;
    });
  }


  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _updateSize(),
      child: Container(
        color: Colors.amberAccent,
        child: AnimatedSize(
          vsync: this,
          curve: Curves.easeInCirc,
          duration: const Duration(seconds: 2),
          child: FlutterLogo(size: _size),
        ),
      ),
    );
  }
}

3- Use the flutter_staggered_grid_view to create a gridview of multiple columns & rows of varying sizes



  new StaggeredGridView.countBuilder(
    crossAxisCount: 4,
    itemCount: 8,
    itemBuilder: (BuildContext context, int index) => new Container(
        color: Colors.green,
        child: new Center(
          child: new CircleAvatar(
            backgroundColor: Colors.white,
            child: new Text('$index'),
          ),
        )),
    staggeredTileBuilder: (int index) =>
        new StaggeredTile.count(2, index.isEven ? 2 : 1),
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
  )

4- You can use the ColorFiltered widget to apply a color filter to its child widgets



      Column(
        children: [
          // The original image
          Image.network(_imageUrl),

          // The black-and-white image
          ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Image.network(_imageUrl),
          ),
        ],
      ),

5- Use the flutter_speed_dial plugin to create more than one floating button on the same screen


...

      floatingActionButton: SpeedDial(
          icon: Icons.share,
          backgroundColor: Colors.amber,
          children: [
            SpeedDialChild(
              child: Icon(Icons.face),
              label: 'Social Network',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do someting */},
            ),
            SpeedDialChild(
              child: Icon(Icons.email),
              label: 'Email',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do something */},
            ),
            SpeedDialChild(
              child: Icon(Icons.chat),
              label: 'Message',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do something */},
            ),
          ]),

...

6- You can create multiple shadows for a Text widget. Check the following example.



        Text('Important Text',
          style: TextStyle(
            color: Colors.black,
            fontSize: 50,
            fontWeight: FontWeight.bold,
            shadows: [
              Shadow(
                  color: Colors.red[500]!,
                  offset: Offset(-50, -50),
                  blurRadius: 5),
              Shadow(
                  color: Colors.green[200]!,
                  offset: Offset(50, 50),
                  blurRadius: 5),
            ],
          ),
        ),

See you next week. 👋🏻

Cover image Bryan Turner on Unsplash