커스터드 - 오일 저장소 앱 인트로 페이지 구축 (실전개발 1일차)

커스터드란? 주유소관련 유류정보와 가격변동에따른 선물처럼 주유를 보관하고 필요할때 쓸수있게 차량소유주에게 도움이 되고 주유소에는 판매에 도움이 되도록하는 앱을통해 유통커뮤니티 플러티 기반 앱개발 프로젝트 

 

 

플러티 기반 아래 인트로로 페이지를 제작 

 

 

구글에서 찾은 인트로 페이지 소스를 적용

 

https://pub.dev/packages/intro_slider

intro_slider | Flutter Package

 

보통 위같은경우 Git에 들어가면 샘플소스가 있다. 확인해보도록 하자.

https://github.com/duytq94/flutter-intro-slider

GitHub - duytq94/flutter-intro-slider: Simple and configurable app introduction slider for Flutter

 

 

flutter pub add 를 통해  컴퍼넌트를 다운받는다. 

 flutter 3.0 버전에서 제공되는 pub add 는 호환성 문제도 체크 가능하다. 아래처럼 적용할수있다.

다행이 호환성에는 문제가 없는것 같다. 

 

 

아래 링크  주소를 찾아보면 샘플소스를 확인할수 있다. 

https://github.com/duytq94/flutter-intro-slider/tree/master/example/lib

GitHub - duytq94/flutter-intro-slider: Simple and configurable app introduction slider for Flutter

일단 내려받아서 확인 할수 있지만 저는 소스를 보고 기존소스에 적용하기로 했다.

우선 기존 작업중이던 main.dart 파일 을 백업하고 

 

기존 메인페이지를 변경하고 

타입에 (0,1,2) 따라 화면이 변경되는것을 알수있다. screen_default 페이지를 변경하면된다.

저부분을 기존 로그인 메인페이로 이동하게 바꾸면 된다.

intro_screen_default.dart 를 입맛에 맞게 수정해서 적용해보았다.

 

별도 위젯으로 만들어서 적용해봄

 

아래는 수정된 페이지 이다.

 

적당한 칼러를 사용해서 적용해봤다.

 

 

수정된 소스를 올려드립니다.

import 'dart:developer';

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:flutter/foundation.dart';
import 'main_login.dart';

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

  @override
  IntroScreenDefaultState createState() => IntroScreenDefaultState();
}

class IntroScreenDefaultState extends State<IntroScreenDefault> {
  List<ContentConfig> listContentConfig = [];

  @override
  void initState() {
    super.initState();

    listContentConfig.add(
      const ContentConfig(
        /*
        title: "최저가 주유소 찾기 힘드시죠?",
         maxLineTitle: 2,

        textAlignTitle: TextAlign.center,
        styleTitle: TextStyle(
            color: Colors.black,
            fontSize: 25,
            fontWeight: FontWeight.bold,
            fontFamily: 'Noto Sans SC'),
            */

        // widgetTitle: Text("최저가 주유소 찾기 \n\r 힘드시죠?"),
        widgetDescription: Intro1("최저가 주유소 찾기 힘드시죠?",
            "국제유가, 공장도가 기반 기술적 분석으로 주유소 판매가격이 오르기 전에 그 가격 그대로 \"보관\"해고유가시대 스마트한 소비를 경험해보세요 "),
        textAlignDescription: TextAlign.start,
        marginDescription: EdgeInsets.all(25),
        styleDescription: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.w300,
            fontFamily: 'Noto Sans SC'),
        heightImage: 250,
        pathImage: "images/intro1.png",
        backgroundColor: Color.fromARGB(255, 247, 246, 245),
      ),
    );

    listContentConfig.add(
      const ContentConfig(
        widgetTitle: Intro2("최저가 주유소 찾아 삼만리 이제 STOP!",
            "위치기반GPS서비스로 가장 가까운 주유소에 \"카스터디\"하시고, 불필요한 에너지 소비를 줄여보세요"),
        textAlignDescription: TextAlign.start,
        //  /   marginDescription: EdgeInsets.all(25),
        styleDescription: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.w300,
            fontFamily: 'Noto Sans SC'),
        heightImage: 300,
        pathImage: "images/intro2.png",
        backgroundColor: Color.fromARGB(255, 240, 146, 146),
      ),
    );

    listContentConfig.add(
      const ContentConfig(
        title: "최저가 주유소 찾아 삼만리 이제 STOP!",
        maxLineTitle: 2,
        maxLineTextDescription: 4,
        heightImage: 250,
        description: "위치기반GPS서비스로 가장 가까운 주유소에 \"카스터디\"하시고, 불필요한 에너지 소비를 줄여보세요",
        pathImage: "images/intro2.png",
        backgroundColor: Color(0xff203152),
      ),
    );
  }

  Future<void> _firebaseMessagingBackgroundHandler(
      RemoteMessage message) async {
    // If you're going to use other Firebase services in the background, such as Firestore,
    // make sure you call `initializeApp` before using other Firebase services.

    if (kDebugMode) {
      print("Handling a background message: ${message.messageId}");
    }
  }

  Future<void> onDonePress() async {
    mainLogin();
  }

  @override
  Widget build(BuildContext context) {
    return IntroSlider(
      key: UniqueKey(),
      listContentConfig: listContentConfig,
      onDonePress: onDonePress,
    );
  }
}

class Intro1 extends StatelessWidget {
  final title;
  final desc;
  const Intro1(this.title, this.desc, {super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        //padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
        // width: 200,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
        margin: EdgeInsets.only(bottom: 10, right: 10),
        child: Column(
          children: [
            Text(title,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                )),
            SizedBox(height: 10),
            Text(desc,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 17,
                ))
          ],
        ));
  }
}

class Intro2 extends StatelessWidget {
  final title;
  final desc;
  const Intro2(this.title, this.desc, {super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        //padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
        // width: 200,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
        margin: EdgeInsets.only(bottom: 0, right: 0),
        child: Column(
          children: [
            SizedBox(height: 100),
            Text(title,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                )),
            SizedBox(height: 10),
            Text(desc,
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 17,
                ))
          ],
        ));
  }
}

다음은 로그인 페이지 적용하여 소스 공개하도록 하겠음