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.
Ş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
venpm
'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ındaBUTTONSTYLE_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.
Ş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/
dizinindecolorscheme2.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ındagenerateColorScheme
işlevinigenerateColorScheme2
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 koddanColorScheme(
metnini kaldırarak ve boş bir satır haline getirerekCOLORSCHEME_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
dizesindeColorScheme(
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.