Flutter Assets ve Image Kullanımı, Mobil uygulamaların vazgeçilmez özelliklerinden olan görsel ve font kaynaklarına kod tarafından erişilip gösterimini sağlama yada kullanma işlemini Flutter içerisinde nasıl gerçekleştiriyoruz makale serimizin devamı niteliğinde olan bu makalede konuyu ele alacağız.
Flutter Assets ve Image Nedir? Nasıl Kullanılır?
Eğer projenizi yeni oluşturduysanız yada varolan bir projenizde ilk defa assets kullanacaksanız gerçekleştirmeniz gereken bazı adımlar ve kontroller yer almaktadır.
Assets dosyaları proje altında yer alan herhangi bir klasörde yer alabilir ama genellikle proje ana dizininde assets adında bir klasör açılarak bu klasörü kullanacağız. Fontlar, görseller diğer türde dosyalarınızı atabilirsiniz ama dediğimiz gibi assets klasörü olması zorunluluk değildir.
Altta örnek olarak oluşturulmuş bir assets klasörü yer almaktadır. Bu assets klasörü içerisine direkt atılmış bir görsel ve icons adında klasör açılıp bunun içerisine de atılmış 2 görsel yer almaktadır. Bir görseli icons klasörü dışında bırakma sebebimiz klasör içerisinde olması ve direkt assets klasörü içerisinde olmasının kodsal olarak yol belirtmede ne gibi farklılıklarının olduğunu göstermek içindir.
Sizinde bu şekilde Flutter projesi ana dizinine bir assets klasörü oluşturup içerisine aynı şekilde bir görsel atıp sonrasında icons adında klasör oluşturup yine yukarıdaki görselde olduğunu gibi aynı isimlerde görseller oluşturduğunuzu varsayıp makaleye bu senaryo ile devam ediyor olacağız.
Bu assets dosyalarının pubspec.yaml adlı dosya içerisinde tanımlanmış olması gerekmektedir aksi taktirde oluşturduğumuz 3 görseli de uygulamamızda kullanamayacağız. Şimdi assets dosyalarımızın tanımlarının yapılmış hali olan pubspec.yaml adlı dosyamızın son halini görelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | name: assets description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.0.0-dev.68.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter flutter: # 3 adet assets dosyamız için yapmamız gereken assets tanımları şu şekilde olmalıdır # birşey hemen dikkatinizi çekmiştir trafiklogo.png assets klasörü ana dizininde # olduğundan assets/ öneki ve icons klasörü tanımı yapılmamıştır. assets: - assets/icons/kaskologo.png - assets/icons/sagliklogo.png - trafiklogo.png |
Üstteki satırlardan bizi ilgilendiren kısım işaretli olan 21-27. satır arasındaki kodlardır. Burada görüldüğü üzere 3 dosyaya ait tanımlamalar yapılmıştır.
Assets dosyalarının örnek kullanımını altta görebilirsiniz. Bizi ilgilendiren asıl kod blokları 36-52 arasındaki kod satırlarıdır bu satırları dikkate almalısınız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Assets Kullanımı', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Örnek Assets Kullanımı'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Row( children: <Widget>[ Expanded( // assets/trafiklogo.png olarak da kullanılabilir. child: Image.asset('trafiklogo.png') ), Expanded( /* assets klasörü altındaki icons klasörü içerisinde yer alan bir görsel kullandığımız için assets/ öneki ve ilgili klasör adı yazılmak zorundadır. */ child: Image.asset('assets/icons/kaskologo.png'), flex: 2 ), Expanded( /* assets klasörü altındaki icons klasörü içerisinde yer alan bir görsel kullandığımız için assets/ öneki ve ilgili klasör adı yazılmak zorundadır. */ child: Image.asset('assets/icons/sagliklogo.png') ) ], ), ), ); } } |
Gördüğünüz gibi Image sınıfının asset adlı metoduna asset yolunu vererek ilgili asset dosyasına erişimi sağladım. Burada hemen birşeyi farketmişsinizdir makale girişinde trafiklogo.png dosyasını bir farkı gösterebilmek için icons klasörü dışında assets ana dizininde bırakmıştım, eğer assets ana dizini içerisinde yer alan bir dosyaya erişmek isterseniz assets/ önekini kullanmadan yukarıdaki kodda yer aldığı gibi Image.asset('trafiklogo.png') kullanılarak da ilgili dosyaya erişilebilir ama istenirse assets/ öneki kullanılırak da asset dosyasına erişilebilir örnek olarak Image.asset('assets/trafiklogo.png') kodunu kullanırsanız hata almadan aynı sonucu elde edeceksiniz.
Uygulamanın Son Hali
3 farklı görsel kullanarak assets kullanımını ve asset kullanımı için gerekli yapılandırmaların nasıl yapıldığını gördük sonuç olarak alttaki gibi basit bir çıktı elde ediyoruz.
Dış Bağlatıdan Image Kullanımı
Yukarıdaki 3 görseli yada farklı bazı görsellerinizi uygulama dışından bir link üzerinden kullanmak için NetworkImage adlı widget’ı kullanabilirsiniz. Yukarıdaki örneğin AssetImage kullanımı yerine NetworkImage olarak değiştirilmiş hali altta yer almaktadır ayrıca görsel kaynağı için placeimg.com adlı online bir görsel hizmeti kullanılmıştır. Üstteki kod bloğunun tamamı yerine kırpılmış olarak sadece body kısmı bizi ilgilendirdiğinden o kısım altta gösterilmiştir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | ... class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Row( children: <Widget>[ Expanded( child: Image(image: NetworkImage('https://placeimg.com/200/200/animals'), width: 200) ), Expanded( child: Image(image: NetworkImage('https://placeimg.com/200/200/nature'), width: 200), flex: 2 ), Expanded( child: Image(image: NetworkImage('https://placeimg.com/200/200/tech'), width: 200) ) ], ), ), ); } } |
Makalede kullanılan örneğe ve Flutter ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.
📚 İlgilenebileceğiniz Diğer Makaleler
- Flutter Hello World Projesi Nasıl Oluşturulur?
- Flutter Önerilen Paketler
- Flutter “FlutterError: Unable to load asset” Hatası ve Çözümü
📚 Kaynaklar
- https://flutter.io/docs/development/ui/assets-and-images
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
