11일차 과제 4

1. 주어진 데이터를 활용하여 제시되는 결과를 만드는 코드를 작성하시오

var mathData = [26, 2, 9, 47, 98, 24, 43, 99, 96, 45, 35, 
			19, 37, 60, 31, 74, 26, 4, 28, 19, 59, 14, 75, 13, 
			93, 88, 64, 15, 68, 34, 96, 48, 1, 44, 14, 11, 31, 
			39, 28, 100, 22, 73, 78, 98, 36, 49, 74, 16, 35, 91, 
			14, 73, 93, 49, 3, 99, 4, 29, 86, 56, 17, 13, 97, 55, 
			94, 7, 100, 66, 59, 85, 94, 11, 16, 48, 16, 44, 75, 14, 
			17, 88, 92, 12, 49, 35, 42, 82, 19, 27, 11, 21, 34, 27, 
			47, 40, 66, 90, 99, 93, 63, 90];

4-1) 모든 요소를 Colors.amber 색상을 적용하여 출력하시오.

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

var mathData = [26, 2, 9, 47, 98, 24, 43, 99, 96, 45, 35, 
19, 37, 60, 31, 74, 26, 4, 28, 19, 59, 14, 75, 13, 
93, 88, 64, 15, 68, 34, 96, 48, 1, 44, 14, 11, 31, 
39, 28, 100, 22, 73, 78, 98, 36, 49, 74, 16, 35, 91, 
14, 73, 93, 49, 3, 99, 4, 29, 86, 56, 17, 13, 97, 55, 
94, 7, 100, 66, 59, 85, 94, 11, 16, 48, 16, 44, 75, 14, 
17, 88, 92, 12, 49, 35, 42, 82, 19, 27, 11, 21, 34, 27, 
47, 40, 66, 90, 99, 93, 63, 90];

    return MaterialApp(

      home: Scaffold(

        body: SafeArea(

          child: GridView.builder(              

            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

                crossAxisCount: 4, mainAxisSpacing: 8, crossAxisSpacing: 8),

            itemCount: mathData.length,

            itemBuilder: ((context, index) {

              return Card(

                shape: RoundedRectangleBorder(

                    borderRadius: BorderRadius.circular(16)),

                color: Colors.amber,

                child: Center(

                  child: Text(mathData[index].toString()),

                ),

              );

            }),

          ),

        ),

      ),

    );

  }

}

실행결과

4-2) 10이 넘지 않는 수만 다음과 같이 출력하시오.

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

var mathData = [26, 2, 9, 47, 98, 24, 43, 99, 96, 45, 35, 
19, 37, 60, 31, 74, 26, 4, 28, 19, 59, 14, 75, 13, 
93, 88, 64, 15, 68, 34, 96, 48, 1, 44, 14, 11, 31, 
39, 28, 100, 22, 73, 78, 98, 36, 49, 74, 16, 35, 91, 
14, 73, 93, 49, 3, 99, 4, 29, 86, 56, 17, 13, 97, 55, 
94, 7, 100, 66, 59, 85, 94, 11, 16, 48, 16, 44, 75, 14, 
17, 88, 92, 12, 49, 35, 42, 82, 19, 27, 11, 21, 34, 27, 
47, 40, 66, 90, 99, 93, 63, 90];

    var filterData = mathData.where((e) => e < 10).toList();            

    return MaterialApp(

      home: Scaffold(

        body: SafeArea(

          child: GridView.builder(

            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

                crossAxisCount: 4, mainAxisSpacing: 8, crossAxisSpacing: 8),

            itemCount: filterData.length,

            itemBuilder: ((context, index) {

              return Padding(

                padding: const EdgeInsets.all(3),

                child: Container(

                  decoration: BoxDecoration(

                      color: Colors.white,

                      boxShadow: [

                        BoxShadow(

                            color: Colors.grey.withOpacity(0.5),

                            spreadRadius: 1,

                            blurRadius: 1),

                      ],

                      borderRadius: BorderRadius.circular(16)),

                  child: Center(

                    child: Text(filterData[index].toString()),

                  ),

                ),

              );

            }),

          ),

        ),

      ),

    );

  }

}

필터링한 데이터를 변수로 만들어서 사용했다

실행결과

4-3) 스크롤이 가능한 형태이며 모든 수를 대상으로 width : [수*2], height: 24 만큼의 크기를 가진 Container를 100개를 나열하는 코드를 작성하시오.

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

var mathData = [26, 2, 9, 47, 98, 24, 43, 99, 96, 45, 35, 
19, 37, 60, 31, 74, 26, 4, 28, 19, 59, 14, 75, 13, 
93, 88, 64, 15, 68, 34, 96, 48, 1, 44, 14, 11, 31, 
39, 28, 100, 22, 73, 78, 98, 36, 49, 74, 16, 35, 91, 
14, 73, 93, 49, 3, 99, 4, 29, 86, 56, 17, 13, 97, 55, 
94, 7, 100, 66, 59, 85, 94, 11, 16, 48, 16, 44, 75, 14, 
17, 88, 92, 12, 49, 35, 42, 82, 19, 27, 11, 21, 34, 27, 
47, 40, 66, 90, 99, 93, 63, 90];

    return MaterialApp(

      home: Scaffold(

        body: SafeArea(

          child: ListView.builder(

            itemCount: mathData.length,

            itemBuilder: ((context, index) {

              return Align(

                alignment: Alignment.centerLeft,

                child: Padding(

                  padding: const EdgeInsets.all(8.0),

                  child: Container(

                    width: mathData[index] * 2,

                    height: 24,

                    decoration: BoxDecoration(

                        borderRadius: BorderRadius.circular(16),

                        color: Colors.white,

                        boxShadow: [

                          BoxShadow(

                            color: Colors.grey.withOpacity(0.5),

                            spreadRadius: 0,

                            blurRadius: 5.0,

                          )

                        ]),

                    child: Center(

                      child: Text(mathData[index].toString()),

                    ),

                  ),

                ),

              );

            }),

          ),

        ),

      ),

    );

  }

}

실행결과

[참고]

https://black-glasses.tistory.com/entry/Flutter-Container-%EB%91%A5%EA%B8%80%EA%B8%B0-%EC%A3%BC%EA%B8%B0%EA%B7%B8%EB%A6%BC%EC%9E%90-%ED%9A%A8%EA%B3%BC-bordershadow

[Flutter] Container 둥글기 주기,그림자 효과 border,shadow