Başlarken

Theta, hosted platformu ve istemci kütüphanesi (client library) arasında çalışır. Başlamak için:

• buildwiththeta.com adresine kaydolun (Kapalı beta sürecinde davet gereklidir).
• Yeni bir proje oluşturun ve ilk arayüzünüzü tasarlayın.
• Aynı adı taşıyan sayfayı kopyalayın.
• Theta istemci kütüphanesi'ni yükleyin ve sayfayı uygulamanızın içine entegre etmek için UIBox('sayfa adı') kullanın.

Theta, bir tarayıcıdan kullanılabilen bir web uygulamasıdır. Optimal deneyim için sistem gereksinimlerine dikkat edin:

• Masaüstü veya dizüstü bilgisayarda çalışmanız önerilir.
• En az 12 inçlik bir ekran kullanın.
• Google Chrome kullanmanız önerilir (sorunlar yaşıyorsanız, sorunların Chrome'da da devam edip etmediğini kontrol edin).
• Bir projede kopyalama yapmak için, ClipBoard'a izin verin (app.buildwiththeta.com adresinde bir iletişim kutusu görünecektir).

• Elemanları taşıma ve yeniden boyutlandırma hakkında bilgi alın.
• Duyarlı sınırlamaları ayarlama hakkında bilgi alın.

flutter pub add theta

Theta'yı, anonim anahtarınızla Theta.initialize yöntemini çağırarak başlatın. Bu yöntemi uygulamanızın kökünde çağırmayı unutmayın.

import 'package:theta/theta.dart';

Future<void> main() async {
    await Theta.initialize(anonKey: 'thetaKey');
}

Uygulamanızı ThetaProvider ile sarmalayarak, herhangi bir UIBox'ın tema ve proje stillerini almasını sağlayın.

ThetaProvider(
    theme: ThemeMode.light,
    child: MaterialApp(
        home: // ...
    ),
)

Uygulamanıza bir UIBox bileşeni(Component) eklemeniz ve bileşen adını bir parametre olarak iletebilmeniz yeterlidir.

/// Your app
return Scaffold(
    body: Center(
        child: UIBox('Component adı'),
    ),
);

Yükleme sırasında bir yedek widget ve bir hata widgeti görüntüleyebilirsiniz.

UIBox(
    'Homepage',
    placeholder: CircularProgressIndicator(),
    errorWidget: (error) => Text(error),
)

Dinamik bir UI istiyor musunuz ve hareket desteği (onTap, doubleTap, vb.) mi istiyorsunuz? Hareket tetikleyicilere dayalı olarak 'workflow' adı verilen özel kod ekleyebilirsiniz.

1. Bir id veya isimle bir UI öğesi seçin.
2. Eylemin başlayacağı tetikleyiciyi seçin.
3. Kodunuzu ekleyin.

UIBox(
    'CupertinoAppBar',
    workflows: [
        Workflow('Element id', Trigger.onTap, (context) {
            /// Your method
        }),
    ]
)

Her bir UI bloğunu, no-code ile Flutter'ı karıştırarak Flutter bileşeniyle geçersiz kılabilirsiniz.

UIBox(
    'Social card',
    overrides: [
        Override('Post title')
            ..setText('My beautiful cat')
            ..setColor(Colors.white, 0.5),
        Override('Cover')
            ..setImage('https://...'),
    ],
),

Eğer no-code bileşeninde üzerine yazmak istediğiniz öğenin zaten bir çocuğu (child) varsa, o çocuk kaldırılıp kullanıcı tarafından kodla girilen çocukla değiştirilecektir.

Ayrıca UIBoxi diğer UIBoxlerin içinde de kullanabilirsiniz. Bu, son derece yüksek bir özelleştirme derecesi sağlar.

UIBox(
    'Component adı',
    overrides: [
        Override('Element id')
            ..setChild(UIBox('Diger component')),
    ],
),

Bir öğenin çocuklarını da üzerine yazabilirsiniz.

UIBox(
    'Component adı',
    overrides: [
        Override('Element adı')
            ..setChildren([
                Text('Child 1'), 
                Text('Child 2')
            ]),
    ],
),