Gemini 2.0 Flash artık üretime hazır. Daha fazla bilgi

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Gemini ile AI Flutter kod oluşturma aracı derleme

Flutter kullanıcı arayüzleri veya hızlıca iterasyon yapmak istediğiniz herhangi bir kod bileşeni oluşturmak için kodlama asistanı aracı oluşturun. Kullanıcı arayüzü oluşturmak eğlenceli ve ödüllendirici olabilir ancak aynı zamanda zor bir iştir. Burada amaç sadece kodu doğru yapmak değil, görünümü ve tarzı doğru yapmak ve ekibinizin bir tasarım yönü üzerinde anlaşmasını sağlamaktır.

Bu eğiticide, Google'ın Flutter Developer Relations ekibi tarafından geliştirilen yapay zeka destekli bir kod yardım aracı olan Flutter Theme Agent'ı nasıl genişleteceğiniz gösterilmektedir. Bu açık kaynak proje, Microsoft Visual Studio Code (VS Code) için bir uzantıdır. Renk şemaları, metin stilleri ve düğme stilleri dahil olmak üzere Flutter temasının veya ThemeData nesnesinin belirli bileşenlerini oluşturur. Mevcut işlevlerin sizin için daha iyi çalışmasını sağlamak amacıyla projeyi değiştirebilir veya geliştirme iş akışınızı daha iyi desteklemek için yeni komutlar oluşturabilirsiniz.

Projenin geliştiricilerinden alınan bilgiler de dahil olmak üzere projeye ve nasıl genişletileceğine dair videolu genel bakış için AI Flutter Code Generator - Build with Google AI başlıklı makaleyi inceleyin. Aksi takdirde, aşağıdaki talimatları uygulayarak projeyi genişletmeye başlayabilirsiniz.

VS Code'da çalışan Flutter Theme Agent'ın ekran görüntüsü

Şekil 1. VS Code uzantı geliştirme ana makinesinde çalışan Flutter Theme Agent.

Proje ayarlama

Bu talimatlar, Flutter Theme Agent projesini geliştirme ve test için ayarlama konusunda size yol gösterir. Genel adımlar şunlardır: Bazı ön koşul yazılımlarını yükleme, birkaç ortam değişkeni ayarlama, projeyi kod deposundan klonlama ve yapılandırma yüklemesini çalıştırma.

Gerekli ön koşulları yükleme

Flutter Theme Agent projesi, Microsoft Visual Studio Code'un (VS Code) bir uzantısı olarak çalışır ve paketleri yönetmek ve uygulamayı çalıştırmak için Node.js ve npm kullanır. Aşağıdaki yükleme talimatları, Linux ana makine içindir.

Gerekli yazılımı yüklemek için:

Platformunuz için Visual Studio Code'u yükleyin.
Platformunuza yönelik yükleme talimatlarını uygulayarak node ve npm'yi yükleyin.
VS Code için Flutter'ı henüz yüklemediyseniz yükleme talimatlarını uygulayın.

Projeyi klonlama ve yapılandırma

Proje kodunu indirin ve gerekli bağımlılıkları indirip projeyi yapılandırmak için npm yükleme komutunu kullanın. Projenin kaynak kodunu almak için git kaynak denetimi yazılımına ihtiyacınız vardır.
Proje kodunu indirip yapılandırmak için:

Aşağıdaki komutu kullanarak git deposunu klonlayın.

git clone https://github.com/google/generative-ai-docs`

İsteğe bağlı olarak, yerel git deponuzu yalnızca Dokümanlar temsilcisi projesinin dosyalarını içerecek şekilde ayarlayarak seyrek kontrol kullanın.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```

Flutter Theme Agent proje kök dizinine gidin.

cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

Bağımlılıkları indirip projeyi yapılandırmak için yükleme komutunu çalıştırın:
```
npm install
```

Uzantıyı yapılandırma ve test etme

Artık cihazınızdaki VS Code'ta Flutter Theme Agent'ı geliştirme uzantısı olarak çalıştırarak yüklemenizi test edebilirsiniz. Test, yeni uzantının bulunduğu ayrı bir VS Code Extension Development Host penceresi açar. Bu yeni pencerede, uzantının Google Gemini API'ye erişmek için kullandığı API anahtarını yapılandırırsınız.

Kurulumunuzu yapılandırmak ve test etmek için:

VS Code uygulamasını başlatın.
VS Code'da Dosya > Yeni Pencere'yi seçerek yeni bir pencere oluşturun.
Dosya > Klasör Aç'ı ve flutter_theme_agent/ klasörünü seçerek Flutter Theme Agent projesini açın.
VS Code'da flutter_theme_agent/package.json dosyasını açın.
Çalıştır > Hata Ayıklamayı Başlat'ı seçerek uzantıyı hata ayıklama modunda çalıştırın. Bu adımda ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açılır.
Kod > Ayarlar > Ayarlar'ı seçerek VS Code ayarlarını açın.
Üretken Yapay Zeka Geliştirici sitesinden Google Gemini API anahtarı edinin ve anahtar dizesini kopyalayın.
API anahtarını yapılandırma ayarı olarak ayarlayın. Arama Ayarları alanına flutter theme yazın, Kullanıcı sekmesini seçin ve Google > Gemini: Api Anahtarı ayarındaki settings.json'da düzenle bağlantısını tıklayın ve Gemini API anahtarınızı ekleyin:
```
"google.ai.apiKey": "your-api-key-here"
```
Değişiklikleri settings.json dosyasına kaydedin ve ayar sekmelerini kapatın.

Uzatma komutlarını test etmek için:

VS Code Uzantı Geliştirme Ana Makinesi penceresinde, oluşturmak istediğiniz kullanıcı arayüzü bileşenini açıklayan bir kod yorumu yazın.
Bileşen özelliklerini içeren yorum metnini seçin.
Görünüm > Komut Paleti'ni seçerek komut paletini açın.
Komut Paleti'nde Flutter Theme yazın ve bu ön ekteki komutlardan birini seçin.

Mevcut komutu değiştirme

Flutter Theme Agent'ta sağlanan komutları değiştirmek, uzantının davranışını ve özelliklerini değiştirmenin en kolay yoludur.

Hem yorum hem de inceleme komutları, kod örnekleri ve bu kodlarla ilgili yorumların yanı sıra yapay zeka dil modeli için bazı genel talimatlar içeren birkaç atışlı istem yaklaşımı kullanır. Bu istem bağlamı bilgileri, Gemini dil modelini yanıt oluşturma konusunda yönlendirir. Yorum veya inceleme komutlarındaki istem talimatlarını, örnekleri ya da her ikisini birden değiştirerek mevcut komutların her birinin davranışını değiştirebilirsiniz.

Bu talimat grubunda, komutun istem metnini değiştirerek buttonstyle.ts komutunun nasıl değiştirileceği açıklanmaktadır.

buttonstyle.ts komutunu düzenlemeye hazırlanmak için:

VS Code uygulamasını başlatın.
VS Code'da Dosya > Yeni Pencere'yi seçerek yeni bir pencere oluşturun.
Dosya > Klasör Aç'ı ve flutter_theme_agent/ klasörünü seçerek Flutter Theme Agent projesini açın.
flutter_theme_agent/src/buttonstyle.ts dosyasını açın.

buttonstyle.ts komutunun davranışını değiştirmek için:\

buttonstyle.ts dosyasında, BUTTONSTYLE_CONTEXT sabit değerini farklı talimatlar içerecek şekilde düzenleyin.

const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

İsteğe bağlı olarak, buttonstyle.ts dosyasında BUTTONSTYLE_CONTEXT sabit değerine düğme stili talimat ve çıkış örneği ekleyebilir veya mevcut örneklerden birini değiştirebilirsiniz.

...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

Değişiklikleri buttonstyle.ts dosyasına kaydedin.

Değiştirilen komutu test etmek için:

VS Code uzantı proje pencerenizde Çalıştır > Hata Ayıklamayı Yeniden Başlat'ı seçerek hata ayıklayıcıyı yeniden başlatın.
VS Code Uzantı Geliştirme Ana Makinesi penceresinde, istediğiniz düğme stilini açıklayan bir kod yorumu seçin. Örneğin:
```
// blue, lickable buttons that light up when you hover over them`
```
Görünüm > Komut Paleti'ni seçerek komut paletini açın.
Komut Paleti'ne Flutter yazın ve Flutter Theme Agent: Create a Flutter ButtonStyle (Flutter Tema Temsilcisi: Flutter ButtonStyle Oluştur) komutunu seçin.

Yeni komut oluşturma

Gemini API ile tamamen yeni görevler gerçekleştiren yeni komutlar oluşturarak Flutter Theme Agent'ı genişletebilirsiniz. buttonstyle.ts ve colorscheme.ts gibi her komut dosyası çoğunlukla kendi kendine yeten bir yapıya sahiptir ve etkin düzenleyiciden metin toplama, istem oluşturma, Gemini API'ye bağlanma, istem gönderme ve yanıtı verme kodlarını içerir.

Yeni komutun göründüğü Flutter Theme Agent ekran görüntüsü

Şekil 2. VS Code uzantısı Geliştirme Ana Makinesi penceresindeki yeni Flutter Theme Agent komutu.

Bu talimat grubunda, mevcut bir komutun (colorscheme.ts) kodunu şablon olarak kullanarak yeni bir komutun nasıl oluşturulacağı açıklanmaktadır. Bu güncelleme, komutu ColorScheme nesnesinin kapsayıcı söz dizimini içermeyecek şekilde değiştirir. Böylece, oluşturma işleminden sonra bu söz dizimini kaldırmanız gerekmez ve çıkışı daha hızlı görselleştirebilirsiniz.

Yalnızca bir ColorScheme objesinin renklerinin listesini oluşturan komut oluşturmak için:

src/ dizininde colorscheme2.ts adlı flutter_theme_agent/src/colorscheme.ts dosyasının bir kopyasını oluşturun.
VS Code'da src/colorscheme2.ts dosyasını açın.

colorscheme2.ts dosyasında generateColorScheme işlevini generateColorScheme2 olarak yeniden adlandırın:

export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

colorscheme2.ts dosyasındaki istem talimatlarını değiştirin. 51. satırdaki örnek koddan ColorScheme( metnini kaldırarak ve boş bir satır haline getirerek COLORSCHEME_CONTEXT kod oluşturma talimatlarını düzenleyin.
```
...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...
```

Renk listesinin sonundaki ")" kapatıcı parantez karakterini kaldırın ve bu satırı boş bir satır haline getirin.

...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

Bu değişiklikleri ikinci örnek için de tekrarlayın. 87. satırdaki COLORSCHEME_CONTEXT dizesinde ColorScheme( metnini kaldırın ve boş bir satır haline getirin.
115. satırda, renk listesinin sonundaki ")" kapatıcı parantez karakterini kaldırın ve bu satırı boş bir satır haline getirin.

COLORSCHEME_CONTEXT dizesine, kapsayıcı söz dizimini dahil etmeme talimatı ekleyin:

...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

Değişiklikleri colorscheme2.ts dosyasına kaydedin.

Yeni komutu entegre etme

Yeni komutun kodunu tamamladıktan sonra, kodu uzantının geri kalanıyla entegre etmeniz gerekir. Yeni komutu uzantının bir parçası haline getirmek için extension.ts ve package.json dosyalarını güncelleyin ve VS Code'un yeni komutu çağırabilmesini sağlayın.

Yeni komutu uzantı koduyla entegre etmek için:

VS Code'da flutter_theme_agent/src/extension.ts dosyasını açın.
Yeni bir içe aktarma ifadesi ekleyerek yeni komut kodunu uzantıya aktarın.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

activate() işlevine aşağıdaki kodu ekleyerek yeni komutu kaydedin.

export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

Değişiklikleri extension.ts dosyasına kaydedin.

Ad komutunu uzantı paketiyle entegre etmek için:

VS Code'da flutter_theme_agent/package.json dosyasını açın.

Yeni komutu paket dosyasının commands bölümüne ekleyin.

"contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

Değişiklikleri package.json dosyasına kaydedin.

Yeni komutu test etme

Komutun kodlamasını tamamlayıp uzantı ile entegre ettikten sonra komutu test edebilirsiniz. Yeni komutunuz yalnızca VS Code Uzantı Geliştirme Ana Makinası penceresinde kullanılabilir. Uzantının kodunu düzenlediğiniz VS Code penceresinde kullanamazsınız.

Değiştirilen komutu test etmek için:

VS Code uzantı proje pencerenizde Çalıştır > Hata Ayıklamayı Yeniden Başlat'ı seçerek hata ayıklayıcıyı yeniden başlatın. Bu işlem, ayrı bir Uzantı Geliştirme Ana Makinesi penceresini yeniden başlatır.
VS Code Uzatma Geliştirme Ana Makinesi penceresinde bir Flutter geliştirme projesi açın.
Aynı pencerede bir kod düzenleyici penceresi açın, istediğiniz kullanıcı arayüzü bileşenini açıklayan bir yorum yazın ve bu yorum metnini seçin.
Görünüm > Komut Paleti'ni seçerek komut paletini açın.
Komut Paleti'ne Flutter Theme yazın ve Flutter Theme Agent: My New Code Generator (Flutter Theme Agent: Yeni Kod Oluşturucum) komutunu seçin.

Ek kaynaklar

Flutter Theme Agent projesi hakkında daha fazla bilgi için kod deposuna bakın. Uygulamayı oluşturma konusunda yardıma ihtiyacınız varsa veya birlikte çalışabileceğiniz geliştiriciler arıyorsanız Google Developers Community Discord sunucusuna göz atın.

Üretim uygulamaları

Flutter Theme Agent'ı geniş bir kitle için dağıtmayı planlıyorsanız Google Gemini API'yi kullanımınız hız sınırlamasına ve diğer kullanım kısıtlamalarına tabi olabilir. Gemini modeliyle üretim uygulaması oluşturmayı düşünüyorsanız uygulamanızın ölçeklenebilirliğini ve güvenilirliğini artırmak için Google Cloud Vertex AI hizmetlerine göz atın.