모바일 앱 개발(플러터) #7

이것저것 만들기

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: MyForm(),
    );
  }
}

class MyForm extends StatefulWidget {
  const MyForm({Key? key}) : super(key: key);

  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  StudentResult studentResult = StudentResult(0, 0, 0, 0, true);
  final _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: ListView(
          children: [
            TextFormField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Mid-term-exam'
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Insert some texts';
                } else if (int.tryParse(value) == null) {
                  return 'Insert some integer';
                }
                return null;
              },
              onSaved: (value) {
                studentResult.midTermExam = int.parse(value!);
              },
            ),
            const SizedBox(
              height: 20,
            ),
            TextFormField(
              decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Final-term-exam'
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Insert some texts';
                } else if (int.tryParse(value) == null) {
                  return 'Insert some integer';
                }
                return null;
              },
              onSaved: (value) {
                studentResult.finalExam = int.parse(value!);
              },
            ),
            const SizedBox(
              height: 20,
            ),
            DropdownButtonFormField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Additional Point',
              ),
              value: studentResult.additionalPoint,
              items: List.generate(11, (i) {
                if (i == 0) {
                  return DropdownMenuItem(
                    value: i,
                    child: const Text('Choose the additional point')
                  );
                }
                return DropdownMenuItem(
                  value: i,
                  child: Text('${i - 1} point')
                );
              }),
              onChanged: (value) {
                setState(() {
                  studentResult.additionalPoint = value!;
                });
              },
              validator: (value) {
                if (value == 0) {
                  return 'Please select the point';
                }
                return null;
              },
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              child: const Text('Enter'),
              onPressed: () {
                setState(() {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                        content: Text('Processing data'),
                    ));
                    _formKey.currentState!.save();
                    print(studentResult);
                  }
                });
              },
            )
          ],
        ),
      ),
    );
  }
}


class StudentResult {
  int midTermExam;
  int finalExam;
  int teamLeaderPoint;
  int additionalPoint;
  bool attendance;

  StudentResult(
      this.midTermExam,
      this.finalExam,
      this.teamLeaderPoint,
      this.additionalPoint,
      this.attendance
      );

  @override
  String toString() {
    return '('
        '$midTermExam, '
        '$finalExam, '
        '$teamLeaderPoint, '
        '$additionalPoint, '
        '$attendance)';
  }
}

뷰가 제스처에 반응하도록 만들기

클릭했을 때 Text 바꿔보기

class _MyHomePageState extends State<MyHomePage> {
  String text = '';
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.orange,
              ),
              onTap: () {
                setState(() {
                  if (text == '') {
                    text = 'This is an orange square';
                  } else {
                    text = '';
                  }
                });
              },
              onLongPress: () {
                setState(() {
                  if (text == '') {
                    text = 'This is an orange squares';
                  } else {
                    text = '';
                  }
                });
              },
            ),
            SizedBox(
              height: 20,
            ),
            Text(text, style: TextStyle(
              fontSize: 20,
            ),)
          ],
        ),
      ),
    );
  }
}

AnimatedContainer 사용해보기

class _MyHomePageState extends State<MyHomePage> {
  String text = '';
  double squareside = 100;
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              child: AnimatedContainer(
                width: squareside,
                height: squareside,
                color: Colors.orange,
                duration: Duration(seconds: 1),
              ),
              onTap: () {
                setState(() {
                  if (text == '') {
                    text = 'This is an orange square';
                  } else {
                    text = '';
                  }
                });
              },
              onLongPress: () {
                setState(() {
                  if (squareside > 75) {
                    squareside = 50;
                    text = 'This is an orange squares';
                  } else {
                    squareside = 100;
                    text = '';
                  }
                });
              },
            ),
            SizedBox(
              height: 20,
            ),
            Text(text, style: TextStyle(
              fontSize: 20,
            ),)
          ],
        ),
      ),
    );
  }
}