실로폰; input/output funcion

장윤찬·2021년 11월 2일
0

goal : 'audioplayers' 패키지와 'function'을 사용하여 'xylophone' 앱을 구현하자.

로컬assets디렉토리의 소리파일을 재생시켜주는 패키지를 이용하여 'xylophone' 기능을 구현하는 앱을 만들것이다.
'input'(parameter) & 'output'(return)을 포함하는 function을 통해 코드를 최대한 간결하게 작성할 계획이다.

화면구현

먼저 화면을 작성하자. 소리를 내는 총7의 건반이 필요하다. 'Column'위젯에 7개의 'TextButton'을 만들고 각 버튼들을 'Expanded' 클래스로 감싸줄 것이다.
패키지에서 제공하는 'player.play'명령을 이용해 소리파일을 재생한다.

  • Scaffold
    배경색 : black
  • Column
    교차축정렬 : stretch
    -Textbutton 1-7
    배경색 : red-purple
    onPressed : player.play(note1.wav-note7.wav)

위의 구조로 코드를 작성하자.

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

void main() {
  runApp(XylophoneApp());
}

class XylophoneApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: TextButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.red)),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note1.wav');
                  },
                ),  // TextButton
              ),  // Expanded
              Expanded(
                child: TextButton(
                  style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all(Colors.orange)),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note2.wav');
                  },
                ),  // TextButton
              ),  // Expanded
              Expanded(
                child: TextButton(
                  style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all(Colors.yellow)),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note3.wav');
                  },
                ),  // TextButton
              ),  // Expanded
              Expanded(
                child: TextButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.green)),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note4.wav');
                  },
                ),  // TextButton
              ),  // Expanded
              Expanded(
                child: TextButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.blue)),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note5.wav');
                  },
                ),  // TextButton
              ),  // Expanded
              Expanded(
                child: TextButton(
                  style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all(Colors.indigo)),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note6.wav');
                  },
                ),  // TextButton
              ),  // Expanded
              Expanded(
                child: TextButton(
                  style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all(Colors.purple)),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note7.wav');
                  },
                ),  // TextButton
              ),  // Expanded
            ],
          ),  // Column
        ),  // SafeArea
      ),  // Scaffold
    );  // MaterialApp
  }
}

반복코드 함수설정

실행결과, 원하는 앱을 구현했지만, 반복되는 구조로 인해 코드가 매우 길어졌다.
'Expanded' 위젯 내부의 반복되는 코드를 'playsound'라는 함수로 정의하자.

Expanded playsound({int number, Color color}) {
  return Expanded(
    child: TextButton(
      style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color)),
      onPressed: () {
        final player = AudioCache();
        player.play('note$number.wav');
      },
    ),
  ) 
}

'Expanded'를 return 해야하므로 함수명 앞에 void가 아닌 'Expanded' 기입.
이제, 함수를 반영하자.

void main() {
  runApp(XylophoneApp());
}

class XylophoneApp extends StatelessWidget {
  Expanded playsound({int number, Color color}) {
    return Expanded(
      child: TextButton(
        style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color)),
        onPressed: () {
          final player = AudioCache();
          player.play('note$number.wav');
        },
      ),  // TextButton
    );  // Expanded
  }

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              playsound(number: 1, color: Colors.red),
              playsound(number: 2, color: Colors.orange),
              playsound(number: 3, color: Colors.yellow),
              playsound(number: 4, color: Colors.green),
              playsound(number: 5, color: Colors.blue),
              playsound(number: 6, color: Colors.indigo),
              playsound(number: 7, color: Colors.purple),
            ],
          ),  // Column
        ),  // SafeArea
      ),  // Scaffold
    );  // MaterialApp
  }
}

훨씬 간결하게 코드를 작성할 수 있었다.

profile
Flutter 학습 일기

0개의 댓글