https://drive.google.com/file/d/1zsXl304l8thzE1TF9aK3mYInnf_nM1eD/view?usp=sharing
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 10),
child: AltAlta(),
),
);
}
Widget durum1() {
// Container ölçü almadığı için ,
// Ebveyninin izin verdiği kadar genişlik ve yükseklik alıyor.
return Container(
color: Colors.blue,
);
}
Widget durum2() {
// Container'a genişlik ve yükseklik verdik
// girdiğiğimiz genişlik ve yükseklik kadar ölçü aldı
return Container(
width: 100,
height: 100,
color: Colors.blue,
);
}
Widget durum3() {
// Container'a gemişlik ve yükseklik vermedik,
// içeriği kadar genişlik ve yükseklik alır. NOT: Row, Column, Scaffold gibi widgetların içinde
// çünkü ebeveyn “İstersen küçük olabilirsin, zorlamıyorum.” der
return Container(
color: Colors.blue,
child: Text("Merhaba"),
);
}
Widget KutuIcindeKutu() {
// Ebeveyn her zaman istersen küçük olabilirsin demeyebilir.
// Bu durumda ya istediği ölçüyü almasına izin veren bir widget içine alırız (Center)
// ya da ebeveyn'in ki muhtemelen Container'a alignment parametresi ile özellik veririz.
return Container(
color: Colors.blue,
width: 150,
height: 150,
alignment: Alignment.topLeft, // Dedik ki "Çocuğum, Kendin gibi davran"
child: Container(
color: Colors.red,
width: 100,
height: 100,
child: Text("Kutu"),
),
);
}
Widget YanYana() {
// Row, genişliği 100% dir,
// Çocuklarının yüksekliği kadar yükseklik alır
// elemanların yanyana yerleşimini sağlar
// x, y ekseni gibi düşünürsek, x yani yatay olan mainAxisAligment olarak geçer.
// mainAxisAlignment kutuların yerleşimini, ortalı, sağa, sola, eşit aralıklı vb ayarlar.
// crossAxisAlignment kutuların dikey yerleşimini ayarlar.
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// mainAxisSize Varsayılan max, genişlik 100%, min olursa çocuklarım kadar geniş ol.
// mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: 100,
height: 50,
),
Container(
color: Colors.blue,
width: 100,
height: 100,
),
Container(
color: Colors.brown,
width: 100,
height: 100,
),
],
);
}
Widget AltAlta() {
// Column, yüksekliği 100% dir,
// Çocuklarının genişliği kadar genişlik alır
// elemanların dikey yerleşimini sağlar
// x, y ekseni gibi düşünürsek, y yani dikey olan mainAxisAligment olarak geçer.
// mainAxisAlignment kutuların yerleşimini, ortalı, yukarı, aşağı, eşit aralıklı vb ayarlar.
// crossAxisAlignment kutuların yatay yerleşimini ayarlar.
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// mainAxisSize Varsayılan max, yükseklik 100%, min olursa çocuklarım kadar yükseklik ol.
// mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.red,
width: 20,
height: 100,
),
Container(
color: Colors.blue,
width: 100,
height: 100,
),
Container(
color: Colors.brown,
width: 100,
height: 100,
),
],
);
}
}
import 'package:flutter/material.dart';
class Uyg01 extends StatelessWidget {
const Uyg01({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
],
),
Container(
margin: EdgeInsets.only(top: 20),
width: 100,
height: 100,
color: Colors.yellow,
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
],
),
],
),
),
);
}
}
// Resim biz de asset ile gerçekleştirilir
// cihazın bir yerinden alınabilir,
// uygulama içinden alınabilir
// internetten yani bir url den alınabilir
// pubspec.yaml içinde bir değişiklik gerekir.
// bu dosya içinde flutter altında (sekme içeri girince altında demek oluyor, tab girintisi yani)
// assets:
// - assets/recep.jpg
import 'package:flutter/material.dart';
class ResimOrnek extends StatelessWidget {
const ResimOrnek({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 200,
width: 200,
color: Colors.blue,
child: Image.asset(
"assets/recep.jpg",
), // önce kendi kadar, sınırı ebeveyni kadar
// Image.asset("resmin yolu") uygulamaya eklenmiş resmi gösterir.
),
Container(
height: 200,
width: 200,
color: Colors.blue,
child: Image.network(
"https://www.algoritmaornekleri.com/wp-content/uploads/2019/05/sql-sorgular%C4%B1-ornekleri.jpg",
), // önce kendi kadar, sınırı ebeveyni kadar
// Image.asset("resmin yolu") uygulamaya eklenmiş resmi gösterir.
),
],
),
),
);
}
}
import 'package:dersproje01/anlatim01.dart';
import 'package:dersproje01/kutuornek.dart';
import 'package:dersproje01/resim.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Tasarim(),
);
}
}
class Tasarim extends StatelessWidget {
const Tasarim({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 2),
borderRadius: BorderRadius.circular(10),
),
child: Icon(Icons.arrow_left),
),
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 2),
borderRadius: BorderRadius.circular(10),
),
child: Icon(Icons.edit),
),
],
),
// Container(
// width: 80,
// height: 80,
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(100),
// color: Colors.blue,
// image: DecorationImage(
// image: AssetImage("assets/recep.jpg"),
// ),
// ),
// // child: Image.asset("assets/recep.jpg"),
// ),
SizedBox(
width: 100,
height: 100,
child: CircleAvatar(
backgroundImage: AssetImage("assets/recep.jpg"),
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
Icon(
Icons.star,
color: Colors.yellow,
),
],
),
SizedBox(
height: 20,
),
Text(
"Johan SMİTH",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Text(
"İSTANBUL, Maltepe ",
style: TextStyle(fontSize: 18),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
balance(),
balance(),
balance(),
],
),
],
),
),
);
}
}
class balance extends StatelessWidget {
const balance({
super.key,
});
@override
Widget build(BuildContext context) {
return Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 38, 88, 40),
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Balance",
style: TextStyle(color: Colors.white),
),
Text(
"00:00",
style: TextStyle(color: Colors.white),
),
],
),
),
);
}
}
