Google Arama ile topraklama özelliği kullanıma sunuldu Daha fazla bilgi

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

Gemini ile AI Flutter kod oluşturma aracı derleme

Flutter kullanıcı arayüzü oluşturmak için bir kodlama asistanı aracı veya hızlı bir şekilde yinelemek istediğiniz kod bileşeni olur. Kullanıcı arayüzü oluşturmak aynı zamanda zorlayıcı olabiliyor. Bu sadece proje yönetiminin kullanmak, aynı zamanda görünümün ve izleniminin doğru olmasını bir tasarım yönü üzerinde fikir sahibi olmanızı sağlar.

Bu eğitimde, kampanyalarınızı Flutter Tema Aracısı, Flutter Developer Relations ekibi tarafından geliştirilen yapay zeka destekli kod yardım aracı baş gelirler sorumlusuyum. Bu açık kaynak projesi, Microsoft Visual Studio için bir uzantıdır. Spesifik oluşturan kod (VS Code) bileşenleri veya renk şemaları da dahil olmak üzere ThemeData nesnesi metin stillerini ve düğme stillerini kullanabilirsiniz. Projede değişiklik yaparak mevcut işlevler sizin için daha iyi çalışır veya bunları daha iyi desteklemek için yeni komutlar nasıl kullanacağınızı göstereceğim.

Analizler de dahil olmak üzere projeye ve projenin nasıl genişletileceğine dair genel bir bakış videosu için inşa edenlere bakın, AI Flutter Code Generator - Google AI ile oluşturun. Aksi takdirde talimatları uygulayarak projeyi genişletmeye başlayabilirsiniz. bölümüne göz atın.

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

Şekil 1. VS Code Extension Geliştirme Ana Makinesinde çalışan Flutter Tema Aracısı penceresini kapatın.

Proje ayarlama

Buradaki talimatlar Flutter Theme Agent proje grubunun ve test edilmesi gerektiğini söylüyor. Genel adımlar, bazı uygulamaları yazılım, birkaç ortam değişkeni belirleme, projeyi klonlama ve yapılandırma yüklemesini çalıştırmanız gerekir.

Ön koşulları yükleme

Flutter Tema Aracısı projesi, Microsoft Studio'nun Visual Studio Code (VS Code) ve Node.js ve npm; paketleri yönetmek ve bir uygulamadır. Aşağıdaki yükleme talimatları bir Linux ana makinesi içindir üretiliyor.

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

Visual Studio Code'u yükleyin. tercih edebilirsiniz.
Kurulumu uygulayarak node ve npm uygulamalarını yükleyin talimatları uygulayın.
VS Code için Flutter'ı henüz yüklemediyseniz yükleme talimatlarına bakın.

Projeyi klonlama ve yapılandırma

Proje kodunu indirin ve npm yükleme komutunu kullanarak bağımlılıkları tespit edip projeyi yapılandırmalısınız. İhtiyacınız olanlar Projeyi almak için git kaynak kontrolü yazılımı kaynak kodudur.
Proje kodunu indirmek ve 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 seyrek ödeme yöntemini kullanacak şekilde yapılandırın, Böylece, yalnızca Dokümanlar Aracısı projesine ait dosyalara sahip olursunuz.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```

Flutter Tema Aracısı proje kök dizinine gidin.

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

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

Uzantıyı yapılandır ve test et

Artık Flutter Theme Agent'ı çalıştırarak yüklemenizi test edebilmeniz gerekir cihazınızdaki VS Code'da bir geliştirme uzantısı olarak kullanabilirsiniz. Test, yeni bir Yeni uzantının bulunduğu VS Code Extension Development Host penceresi kullanılabilir. Bu yeni pencerede, uzantının aşağıdakiler için kullandığı API Anahtarını yapılandırırsınız: Google Gemini API'ye erişme.

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

VS Code uygulamasını başlatın.
VS Code'da File > (Dosya >) öğesini seçerek yeni bir pencere oluşturun. Yeni Pencere'yi tıklayın.
File > (Dosya >) öğesini seçerek Flutter Theme Agent projesini açın. Klasörü açın. flutter_theme_agent/ klasörünü seçin.
VS Code'da flutter_theme_agent/package.json dosyasını açın.
Çalıştır > Hata ayıklama işlemini başlatın. Bu adım ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açar.
Kod > Ayarlar > Ayarlar.
Bir Google Gemini API Anahtarı Üretken Yapay Zeka Geliştirici sitesinden alıp anahtar dizesini kopyalayın.
API anahtarını bir yapılandırma ayarı olarak ayarlayın. Arama Ayarları'nda alanına flutter theme yazın, Kullanıcı sekmesini seçin ve Google > Gemini: API Anahtarı ayarında, 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"
```
settings.json dosyasındaki değişiklikleri kaydedin ve ayarlar sekmelerini kapatın.

Uzantı komutlarını test etmek için:

VS Code Uzantı Geliştirme Ana Makinesi penceresinde bir kod yazın oluşturmak istediğiniz kullanıcı arayüzü bileşenini açıklayan bir yorumda bulunun.
Bileşen özelliklerine sahip yorum metnini seçin.
Görünüm > Komut Paleti'ni tıklayın.
Komut Paleti'ne Flutter Theme yazın ve komutların önüne geçer.

Mevcut komutu değiştir

Flutter Tema Aracısı'nda sağlanan komutları değiştirerek, uzantının davranışını ve özelliklerini değiştirin.

Hem yorum hem de inceleme komutlarında birkaç çekim istemi içeren örnek kodların ve yorumların yanı sıra koda ilişkin yapay zeka dil modeli için talimatlar. Bu istem bağlam bilgisi kılavuzları Gemini dil modelini kullanır. İstemi değiştirerek ya da yorum veya inceleme komutlarında ya da her ikisinde birden mevcut komutların her birinin çalışma biçimini değiştirebilir.

Bu talimatlar dizisi, buttonstyle.ts komutunun nasıl değiştirileceğini komutun istem metnini değiştirebilirsiniz.

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

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

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

buttonstyle.ts dosyasında BUTTONSTYLE_CONTEXT sabitini düzenleyin farklı talimatlar eklemeniz gerekir.

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ğeri için başka bir düğme stili talimat ve çıkışı örneği ekleyin veya örneklerden birini değiştirin.

...
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?>(
...

buttonstyle.ts dosyasındaki değişiklikleri kaydedin.

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

VS kodu uzantısı proje pencerenizde hata ayıklayıcıyı şu şekilde yeniden başlatın: Çalıştır > Hata ayıklamayı yeniden başlatın.
VS Code Extension Development Host penceresinde bir kod seçin düzenleyici penceresinde istediğiniz düğme stilini tarif ederek örnek:
```
// blue, lickable buttons that light up when you hover over them`
```
Görünüm > Komut Paleti'ni tıklayın.
Komut Paleti'ne Flutter yazın ve Flutter Teması'nı seçin Aracı: Bir Flutter ButtonStyle komutu oluşturun.

Yeni komut oluştur

Flutter Tema Aracısı'nı, yeni komutlar oluşturarak Flutter'daki yepyeni görevlere ev sahipliği yapıyor. Örneğin, buttonstyle.ts ve colorscheme.ts, çoğunlukla bağımsızdır ve şunları içerir: etkin düzenleyiciden metin toplayıp istem oluşturmak, bağlantı kurmak Gemini API'ye göndereceğim, istem göndereceğim ve yanıtı cevaplayacağım.

Yeni komutun göründüğü Flutter Tema Aracısının ekran görüntüsü

Şekil 2. VS Kod Uzantısı'ndaki yeni Flutter Tema Aracısı komutu Geliştirme Ana Makine penceresi.

Bu talimatlar dizisi, mevcut colorscheme.ts komutunu şablon olarak kullanın. Bu güncelleme, komutunda belirtilen ColorScheme nesnesinin kapanış söz dizimini dahil etmemesi için oluşturma işleminden sonra bu söz dizimini kaldırmanız ve çıkışı görselleştirmeniz daha hızlı.

ColorScheme için yalnızca renk listesi oluşturan komut oluşturmak üzere nesne:

flutter_theme_agent/src/colorscheme.ts dosyasının şu adla kopyasını oluştur: src/ dizininde colorscheme2.ts.
VS Code'da src/colorscheme2.ts dosyasını açın.

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

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

colorscheme2.ts dosyasındaki istem talimatlarını değiştirin. Düzenle COLORSCHEME_CONTEXT kod oluşturma talimatlarını 51. satırdaki örnek koddan ColorScheme( metnini alıp bunu boş satır haline getirin.
```
...
Here's the example of good Dart code:

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

")" kapanış parantezi karakterini kaldırın renk listesi oluşturun ve bunu boş bir satır yapın.

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

This example code is a good ...

İkinci örnek için bu değişiklikleri tekrarlayın. 87. satırdaki COLORSCHEME_CONTEXT dizesi, ColorScheme( metnini kaldırın ve boş satır yapın.
115. satırda, ")" kapanış parantezi karakterini kaldırın şuradan sonunu işaretleyin ve bunu boş bir satır yapın.

COLORSCHEME_CONTEXT dizesine, dahil etmeme talimatı ekleyin şu söz dizimini ekleyebilirsiniz:

...
- 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:
...

colorscheme2.ts dosyasındaki değişiklikleri kaydedin.

Yeni komutu entegre edin

Yeni komutun kodunu tamamladıktan sonra, yeni komut dosyası onu da görebilirsiniz. extension.ts ve package.json dosyalarını şu şekilde güncelle: yeni komut bölümünü uzantının bir parçası haline getirin ve VS Kodu'nun çağrılmasını sağlayın yeni komut yazı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 işlemi ekleyerek yeni komut kodunu uzantıya aktarın ifade eder.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Aşağıdaki kodu activate() işlevi.

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

extension.ts dosyasındaki değişiklikleri 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."
    }
  ],

package.json dosyasındaki değişiklikleri kaydedin.

Yeni komutu test etme

Komutun kodunu kodlamayı tamamladıktan ve komut satırıyla test edebilirsiniz. Yeni komutunuz yalnızca VS Kodu'nda kullanılabilir Uzantı Geliştirme Barındırıcısı penceresinden değil, uzantının kodunu düzenledi.

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

VS kodu uzantısı proje pencerenizde hata ayıklayıcıyı şu şekilde yeniden başlatın: Çalıştır > Hata Ayıklamayı Yeniden Başlat (Bu işlem, ayrı bir Uzantı Geliştirme Ana Makinesi penceresi.
VS Code Extension Development Host penceresinde bir Flutter açın projesidir.
Aynı pencerede bir kod düzenleyici penceresi açın, kullanıcı arayüzü bileşenini, ardından da bu yorum metnini seçin.
Görünüm > Komut Paleti'ni tıklayın.
Komut Paleti'ne Flutter Theme yazın ve Flutter Theme Agent: My New Code Generator komutu.

Ek kaynaklar

Flutter Tema Aracısı projesi hakkında daha fazla bilgi için kod deposu'na gidin. Uygulamayı geliştirme konusunda yardıma ihtiyacınız varsa veya geliştirici arıyorsanız hakkında daha fazla bilgi edinmek için Google Developers Community Discord sunucusu kullanılacak.

Üretim uygulamaları

Flutter Tema Aracı'nı geniş bir kitleye dağıtmayı planlıyorsanız Google Gemini API kullanımı, hız sınırlamasına ve diğer kullanım kısıtlamaları hakkında daha fazla bilgi edinin. Gemini modeliyle bir üretim uygulaması derlemeyi düşünüyorsanız çıkış yapmak Google Cloud Vertex AI hizmetleri sunmanızı sağlar.