Flutter & Dart Fundamentals | Örnek Quiz Uygulaması #16

import 'package: flutter/material.dart';

void main(){
    runApp(MaterialApp(home: Scaffold(body: )));
}

import 'package: flutter/material.dart';

class StartScreen extends StatelessWidget {
StartScreen({super.key});
@override
Widget build(context){
  return const Text('Start screen');
}

//main dosyasında yapılacak işlemler

runApp(
    MaterialApp(
        home: Scaffold(
            body: Container(
               child: const StartScreen(),
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [
                           
                        ]
                    )
                )
            )
        )
    )
)

Center(
    child: Column(
        children: [
       
        ]
    )
)

void main() {
  runApp(const Quiz());
}

 return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.black,
                Colors.white,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: screenWidget,
        ),

class Quiz extends StatefulWidget {
  const Quiz({super.key});

  @override
  State<Quiz> createState() {
    return _QuizState();
  }
}

class _QuizState extends State<Quiz> {
....

import 'package:flutter/material.dart';
import 'package:flutter_application_2/data/questions.dart';
import 'package:flutter_application_2/questions_screen.dart';
import 'package:flutter_application_2/start_screen.dart';

class Quiz extends StatefulWidget {
  const Quiz({super.key});

  @override
  State<Quiz> createState() {
    return _QuizState();
  }
}

class _QuizState extends State<Quiz> {
  List<String> selectedAnswers = [];

  String activeScreen = 'start-screen';

  void chooseAnswer(String answer) {
   
    selectedAnswers.add(answer);
    if (selectedAnswers.length == questions.length) {
      setState(() {
        selectedAnswers = [];
        activeScreen = 'start-screen';
      });
    }
  }

  void switchScreen() {
    setState(() {
      activeScreen = 'questions-screen';
    });
  }

  @override
  Widget build(context) {
    Widget screenWidget = StartScreen(switchScreen);

    if (activeScreen == 'questions-screen') {
      //if condition yapısı
      screenWidget = QuestionsScreen(
        onSelectAnswer: chooseAnswer,
      );
    }

    /*
    final screenWidget = activeScreen == 'start-screen' ? StartScreen(switchScreen) : const QuestionsScreen();
    /*
          ternary kullanımı blabla ? asdf : csdf
          blabla true ise asdf değilse csdf çalışır
          ufak ve işlevsel bir condition
           */
    böyle yapıp daha sonra childa screenWidget denilerek de kullanılabilirdi
     */

    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.black,
                Colors.white,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: screenWidget,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class StartScreen extends StatelessWidget {
  const StartScreen(this.startQuiz, {super.key});

  final void Function() startQuiz;

  @override
  Widget build(context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            'assets/images/drawing_image.png',
            width: 300,
          ),
          const SizedBox(
            height: 80,
          ),
          Text(
            'Learn Flutter the fun way!',
            style: GoogleFonts.lato(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
          const SizedBox(
            height: 30,
          ),
          OutlinedButton.icon(
            onPressed: startQuiz,
            style: OutlinedButton.styleFrom(
              foregroundColor: Colors.white,
            ),
            icon: const Icon(Icons.arrow_right_alt),
            label: const Text('Start Quiz'),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_application_2/answer_button.dart';
import 'package:flutter_application_2/data/questions.dart';
import 'package:flutter_application_2/models/quiz_question.dart';
import 'package:google_fonts/google_fonts.dart';

class QuestionsScreen extends StatefulWidget {
  const QuestionsScreen({super.key, required this.onSelectAnswer});

  final void Function(String answer) onSelectAnswer;

  @override
  State<QuestionsScreen> createState() {
    return _QuestionsScreenState();
  }
}

class _QuestionsScreenState extends State<QuestionsScreen> {
  var currentQuestionIndex = 0;

  void answerQuestion(String selectedAnswer) {
    widget.onSelectAnswer(selectedAnswer); //bu aslında chooseAnswer fonksiyonunu kullanıyor yani quiz.dart dosyasındaki
    setState(() {
      currentQuestionIndex++;
    });
  }

  @override
  Widget build(context) {
    final QuizQuestion currentQuestion = questions[currentQuestionIndex];

    return SizedBox(
      width: double.infinity, //use as much width as you can demektir
      child: Container(
        margin: const EdgeInsets.all(
            40), //containerın margin verme özelliği vardır columnı container ile sarmalayıp margin verdik
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              currentQuestion.text,
              textAlign: TextAlign.center, //texti hizalamaya yarar yatayda
              style: GoogleFonts.lato(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 24,
              ),
            ),
            const SizedBox(
              height: 30,
            ),
          
            ...currentQuestion.getShuffledAnswers().map((answer) {
              return AnswerButton(
                answerText: answer,
                onTap: () {
                  answerQuestion(answer);
                },
              );
            }),
          ],
        ),
      ),
    );
  }
}

/*

*/

if Statements & Comparison Operators

The if statement is a crucial feature of the Dart language - actually, it's a core feature of pretty much all programming languages.

In addition to what you learned in the previous lecture, in Dart, you may also use if inside of lists to conditionally add items to lists:

final myList = [
  1,
  2,
  if (condition)
    3
];

In this example, the number 3 will only be added to myList if condition was met

final myList = [
  1,
  2,
  if (condition)
    3
  else
    4
];


Using this feature is optional. Alternatively, you could, for example, also work with a ternary expression:

final myList = [
  1,
  2,
  condition ? 3 : 4
];


Especially when inserting more complex values (e.g., a widget with multiple parameters being set) into a more complex list (e.g., a list of widgets passed to a Column() or Row()), this feature can lead to more readable code.

Examples:

if (true) {
  // do something ...
}
// or
true ? 'this' : 'that'



veya


if (randomNumber == 5) {
  // do something
}

karıştırma

var userName = 'Max'; // assignment operator used
if (userName == 'Max') { ... } // comparison operator used

!= to check for inequality (randomNumber != 5 expects randomNumber to NOT be 5, i.e., to be any other value)

> to check for the value on the left to be greater than the value on the right (randomNumber > 5 yields true if randomNumber is greater than 5)

>= to check for the value on the left to be greater than or equal to the value on the right (randomNumber >= 5 yields true if randomNumber is greater than 5 or equals 5)

< to check for the value on the left to be smaller than the value on the right (randomNumber < 5 yields true if randomNumber is smaller than 5)

<= to check for the value on the left to be smaller than or equal to the value on the right (randomNumber <= 5 yields true if randomNumber is smaller than 5 or equals 5)

!PUB.DEV

pub.dev dart package larının toplandığı bir yer bir sürü package var kullanılabilecek.

//bu blueprint olacak sorular için model sınıf

class QuizQuestion {
  const QuizQuestion(this.text, this.answers);
  //bu constructor functionumuzda böyle

  final String text;
  final List<String> answers;

  List<String> getShuffledAnswers() {
    final shuffledList = List.of(answers);
    //Listlerin of constructor fonksiyonu var mesela yeni bir liste yapıyor başka bir listeyi base alarak.
    shuffledList.shuffle(); //shufle metodu listeyi harmanlar ve hafızada da değiştirir.
    /*
    burada final olarak tanımlanan List nasıl değişiyor?
    çünkü final olarak tanımlama yaptığımızda reassign yapamıyoruz artık. o yüzden değişmez diyoruz genel olarak.
    yani reassign yapılamaz shuffledList e yeni bir liste assign edemezsin. ama varolan list in içeriğini değiştirebilirsin.
   
     */
    return shuffledList;
  }
}

//dummy sınıf verileri tutacak QuizQuestion sınıfımızı oluşturmuştuk o model sınıftan burada nesneler oluşturacağız

import 'package:flutter_application_2/models/quiz_question.dart';

const questions = [
  QuizQuestion(
    'What are the main building blocks of Flutter UIs?',
    [
      'Widgets', //burada hep ilk cevap dogru olsun diye ayarlayacagiz ama UI da harman olarak gösteririz onu sıkıntı yok
      'Components',
      'Blocks',
      'Functions',
    ],
  ),
  QuizQuestion('How are Flutter UIs built?', [
    'By combining widgets in code',
    'By combining widgets in a visual editor',
    'By defining widgets in config files',
    'By using XCode for iOS and Android Studio for Android',
  ]),
  QuizQuestion(
    'What\'s the purpose of a StatefulWidget?',
    [
      'Update UI as data changes',
      'Update data as UI changes',
      'Ignore data changes',
      'Render UI that does not depend on data',
    ],
  ),
  QuizQuestion(
    'Which widget should you try to use more often: StatelessWidget or StatefulWidget?',
    [
      'StatelessWidget',
      'StatefulWidget',
      'Both are equally good',
      'None of the above',
    ],
  ),
  QuizQuestion(
    'What happens if you change data in a StatelessWidget?',
    [
      'The UI is not updated',
      'The UI is updated',
      'The closest StatefulWidget is updated',
      'Any nested StatefulWidgets are updated',
    ],
  ),
  QuizQuestion(
    'How should you update data inside of StatefulWidgets?',
    [
      'By calling setState()',
      'By calling updateData()',
      'By calling updateUI()',
      'By calling updateState()',
    ],
  ),
];

import 'package:flutter/material.dart';

class AnswerButton extends StatelessWidget {
  //ozel buton widgetı olusturuyoruz string isteyecek ullanırken bunu buton ismi olarak göstereceğiz bir de onpressed olarak ayarlayalım onu da istesin butonun ne yapacagını da soylesin kullanırken
  const AnswerButton({
    super.key,
    required this.answerText,
    required this.onTap,
  }); //constructor functionımız
  //ayarlarken required named parameter kullanacagız

  final String answerText;
  final void Function() onTap;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onTap,
      style: ElevatedButton.styleFrom(
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 40),
        foregroundColor: Colors.black,
        backgroundColor: Colors.yellow,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40),
        ),
      ),
      child: Text(
        answerText,
        textAlign: TextAlign.center,
      ),
    );
  }
}