[Flutter 플러터] 8. 플러터 라이브러리 사용하기

Flutter의 Callback

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: const Text('flutter의 Callback'),
        ),
        body: const Body()),
    ),
  );
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return TestWidget();
  }
}


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

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  int value = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('Count : $value', style: TextStyle(fontSize: 30),),
        TestButton(addCounter),
      ]
    );
  }

  void addCounter(int addValue) => setState(() => value = addValue + value);

}


class TestButton extends StatelessWidget {
  const TestButton(this.callback, {super.key});

  final Function(int) callback;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 8),
      width: double.infinity,
      child: InkWell(
        onTap: () => callback.call(1),
        onDoubleTap: () => callback.call(5),
        onLongPress: () => callback.call(10),
        child: Center(
            child: Container(
                padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                decoration: BoxDecoration(border: Border.all()),
                child: const Text('Up counter', style: TextStyle(fontSize: 24),))),
      ),
    );
  }
}

 

 

 

반응형

 

 

Flutter 외부 라이브러리 사용하기

english_words를 사용하여, 랜덤한 글자가 나오게 만들었다.

 

pubspec.yaml에 붙여넣었다.

 

import 'package:english_words/english_words.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.lightBlue,
            title: const Text('flutter에서 외부 라이브러리 사용하기'),
          ),
          body: const Body()),
    ),
  );
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return RandomWords();
  }
}

class RandomWords extends StatelessWidget {
  const RandomWords({super.key});

  @override
  Widget build(BuildContext context) {
    final wordList = generateWordPairs().take(5).toList();
    final widgets = wordList
        .map((word) => Text(
              word.asCamelCase,
              style: TextStyle(fontSize: 32),
            ))
        .toList();

    return Column(
      children: widgets,
    );
  }
}

728x90

 

 

Flutter 로컬 데이터 사용하기

assets 폴더를 만들고 images 폴더를 만들어 그 안에 apple.jpeg 이미지를 넣었다.

 

pubspec.yaml에서 

 

assets:

   - assets/images 를 넣었다.

 

import 'package:english_words/english_words.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

const assetImagePath = 'assets/images';
const bannerImage = '$assetImagePath/apple.jpeg';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.lightBlue,
            title: const Text('flutter에서 로컬 데이터 사용하기'),
          ),
          body: const Body()),
    ),
  );
}


class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset(bannerImage),
    );
  }
}