Tutorial¶

Welcome to Lucy Studio. This tutorial introduces the core concepts and guides you through building a simple interactive screen.

You will create a page where text changes when a button is tapped.

Place Widgets on the Canvas¶

Place a Column widget first, then add Text and Button inside it.

1. Place a Column widget

   • Select Column in the widget list.
   • Drag it onto the canvas.

   

2. Place a Text widget

   • Select Text in the widget list.
   • Drag and drop it inside the Column.

   

3. Place a Button widget

   • Select Button in the widget list.
   • Drag and drop it inside the Column.

   

4. Check the widget tree

   • Confirm that Text and Button are children of Column in order.

   

Why place Column first?

Lucy Studio generates Flutter code. Widgets such as Text and Button need a layout parent that defines position and space. Column provides that layout context.

Edit Widget Properties¶

1. Update Column alignment

   • Select Column on the canvas.
   • In the Property panel, set mainAxisAlignment to center.

   

2. Edit Text widget properties

   • Select Text.
   • Set id to txtHello.
   • Set fontSize to 36.0.

   

3. Edit Button widget properties

   • Select Button.
   • Set id to myBtn.

   

Write a Script¶

1. Open the script window

   • Click Code Editor in the upper-right corner of the canvas.

   

2. Add your script

   • Enter the script shown below.

   

Verify in Lucy Player¶

Make sure Lucy Player is installed and logged in on the target device.

• Install Lucy Player
  • Get it on Android
  • Get it on iOS

• Connect the device

  • Enter an alias in Lucy Player.
  • Scan the project QR code (or enter the UUID manually).

  

• Run from Studio

  • Click the phone icon in Action Bar and confirm the connected device.
  • Click Run (triangle icon).

  

• Check the result on Player

  • Tap the button and verify the text changes.

  

For detailed setup, see Set Up and Connect Lucy Player.