# 💥Welcome to the MorphrBuildBattleChallenge

<Info>The challenge starts on May 28th 2025 and will end on June 28th 2025</Info>

During the challenge, you will use Morphr to push Figma changes to Flutter in seconds. Express your creativity and be original to compete with other participants and win prizes!

## 📘 Rules for participating
- 🏠 Join our [Discord community](https://discord.gg/cVm7gsx54C) 
- ✨ Create a beautiful and high-quality Figma design
- 🧠 Use Morphr to sync Figma with Flutter – even for a single button, if that’s cool!
- 🎥 Make a short and original  video of your project

## 🎁 Prizes
- 🥇 $250 + reposts on our socials
- 🥈 $100 + reposts on our socials
- 🥉 $50 + reposts on our socials

## 🎓Judges
- [Jordan Bonnet](https://www.linkedin.com/in/jordanbonnet/), creator of fluo.dev and former first mobile engineer at Uber
- The [Morphr team](https://www.linkedin.com/company/morphr-dev)

Judges will award prizes to winners based on:
1. Creativity of the project
2. Originality of the video
2. Community engagement on posts shared from the Morphr page (likes, comments, reposts)

# How to join the challenge
<Steps>
  <Step title="Install morphr">
    Install morphr:

    ```bash
    dart pub global activate morphr
    ```

    The `morphr` executable will be available in your terminal.
  </Step>
  <Step title="Register">
   Create a morphr account: 

    ```bash
    morphr register
    ```
  </Step>
  <Step title="Connect with Figma">
   Connect your morphr account to your Figma account: 

    ```bash
    morphr figma-connect
    ```
  </Step>
  <Step title="Create a new project">
   Create a new Flutter project: 

    ```bash
    flutter create new_project
    ```
    
    And initialize morphr:
    ```bash
    morphr init
    ```
  </Step>
  <Step title="Sync your Figma project">
   Sync your project over-the-air with: 

    ```bash
    morphr sync
    ```
  </Step>
  <Step title="Create something awesome!">
  Create beautiful Flutter applications with morphr!
  </Step>
</Steps>

# Example

Here is a quick example on what you can do for the Morphr Build Battle!

<YouTube id="WQDdAkxoDhQ" />

<Accordion title="Show example code">
```dart
import 'package:flutter/material.dart';
import 'package:morphr/morphr.dart';
import 'package:morphr_build_battle/morphr_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MorphrService.instance.initializeCloud(options: morphrOptions);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Morphr Build Battle', home: const MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _morphed = false;
  bool _animating = false;

  void _morph() {
    setState(() {
      if (_animating) return;
      _morphed = !_morphed;
      _animating = !_animating;
    });
  }

  void _animate() => setState(() => _animating = !_animating);

  @override
  Widget build(BuildContext context) {
    final button = morph(_morphed ? "button_end" : "button_start");
    final scaffold = morph("scaffold");
    return Scaffold(
      appBar: AppBar(
        backgroundColor: scaffold?.colors.first,
        title: Text(
          "Morphr Build Battle",
          style: TextStyle(color: Colors.white),
        ),
      ),
      backgroundColor: scaffold?.colors.first,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 16,
          children: [
            GestureDetector(
              onTap: _morph,
              child: AnimatedContainer(
                alignment: Alignment.center,
                onEnd: _animate,
                duration: const Duration(milliseconds: 1000),
                curve: Curves.easeInOutCubicEmphasized,
                width: button?.size.width,
                height: button?.size.height,
                decoration: BoxDecoration().morph(
                  _morphed ? "button_end" : "button_start",
                ),
              ),
            ),
            SizedBox(
              height: 20,
              child: Text(
                _animating ? "I'm morphing..." : "Tap to morph",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```
</Accordion>

# How to submit your project

Fill out our [form](https://tally.so/r/w2NZ5p) to send us the description and video of your project. Once your project has been submitted, we will republish it on our social pages of Linkedin and X. If you find any problem, contact us on our Discord server and we will help you.

At the end of the challenge we will announce the three winners and award them the prizes.