Flutter 젤리 슬라이드

이번에는 pub.dev에 라이브러리를 사용해 젤리 슬라이드(이름은 liquid swipe인데 젤리같해서...)를 만들어보겠습니다.

먼저 pub.dev/에 들어가셔서 liquid_swipe라고 검색하고 나온 곳을 들어갑니다.

liquid_swipe 검색(https://pub.dev/packages/liquid_swipe)

그 후 Installing탭을 누른 후 dependencies 밑에 부분을 복사합니다.

pubspec.yaml에 들어가서 아래 이미지와 같이 붙여줍니다.

그 후 Ctrl + S 혹은 터미널이나 cmd창에 flutter pub get이라고 작성하거나 위에 다운로드 버튼을 눌러줍니다.

pubspec.yaml에 자리에 맞지 않게 작성하거나 띄어쓰기를 하나라도 잘못하거나 오타가 있을 때는 실행이 안 되니 주의하시기 바랍니다.

 

그 후 dart로 돌아와 다음과 같이 import하면 사용이 가능해집니다.

import 'package:liquid_swipe/liquid_swipe.dart';

 

예제는 Example탭에서도 볼 수 있으니 참고해주시고 아래는 제가 만든 간단한 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

final pages = [
  Container(
    color: Colors.blueGrey,
    child: Center(
      child: Text(
        'PAGE1',
        style: TextStyle(fontSize: 40),
      ),
    ),
  ),
  Container(
    color: Colors.lightGreen,
    child: Center(
      child: Text(
        "PAGE2",
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 35.0,
          color: Colors.white,
        ),
      ),
    ),
  ),
  Container(
    color: Colors.blue,
    child: Center(
      child: Column(
        children: [
          Text(
            'PAGE3',
            style: TextStyle(fontSize: 40),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text('이동'),
          )
        ],
      ),
    ),
  )
];

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) => LiquidSwipe(pages: pages));
  }
}