Intro-slider Flutter Image Not Appearing

Question

I am quite new to app development and I had a few questions about Flutter I was hoping someone could help me with!

First, I am trying to code an intro-slide part in my code. I have found this code online (https://flutterawesome.com/simple-and-configurable-app-introduction-slider-for-flutter/) and when I tried executing it, using my own images, only the background color seems to print. When I remove the background colors, it is just a white screen. Is my pageImage part correct? I saved an assert folder everywhere, so I'm unsure if that is the problem. I have included my code at the end.

Thank you for your time!

class _MyHomePageState extends State<MyHomePage> {
   List<Slide> slides = new List();

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

    slides.add(
      new Slide(
        title: "ERASER",
        description: "Allow miles wound place the leave had. To sitting subject no improve studied limited",
        pathImage: "assets/images/1.png",
        backgroundColor: Colors.pink[200],
      ),
    );
    slides.add(
      new Slide(
        title: "PENCIL",
        description: "Ye indulgence unreserved connection alteration appearance",
        pathImage: "assets/images/1.png",
        backgroundColor: Colors.blue[200],
      ),
    );
    slides.add(
      new Slide(
        title: "RULER",
        description:
        "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",
        pathImage: "assets/images/3.jpg",
      ),
    );
  }

  void onDonePress() {
    // TODO: go to next screen
  }

  void onSkipPress() {
    // TODO: go to next screen
  }


  @override
  Widget build(BuildContext context) {
    return new IntroSlider(
      slides: this.slides,
      onDonePress: this.onDonePress,
      onSkipPress: this.onSkipPress,
    );
  }
}

**Solution: edit assets in pubspec page

Edit:

On the left (the orange part) is how I want the blue image to appear: No scrolling and fills the whole page. However, I tried to make my image (on the right) fill the page by editing the width and height and I started having to scroll where there is the pink background below and above the image (I assume it is because it keeps having to center the image). Is there any way to make my image my background so it is like the picture on the left? I understand the orange color background is the background color, but hopefully, by comparing the two it makes sense. Thank you!

Solution

I create new intro widget. Here is the code.

import 'package:flutter/material.dart';

class MyIntroView extends StatefulWidget {
  final List<Widget> pages;
  final VoidCallback onIntroCompleted;

  const MyIntroView({
    Key key,
    @required this.pages,
    @required this.onIntroCompleted,
  })  : assert(pages != null),
        assert(onIntroCompleted != null),
        super(key: key);

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

class _MyIntroViewState extends State<MyIntroView> {
  PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
    _pageController = PageController(
      initialPage: _currentPage,
    );
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        NotificationListener<ScrollEndNotification>(
          onNotification: (x) {
            setState(() {
              _currentPage = _pageController.page.round();
            });
            return false;
          },
          child: PageView(
            children: widget.pages,
            controller: _pageController,
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: _buildBottomButtons(),
        ),
      ],
    );
  }

  bool get _isFinalPage => _currentPage == widget.pages.length - 1;

  Widget _buildBottomButtons() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Opacity(
            opacity: _isFinalPage ? 0.0 : 1.0,
            child: _buildButton("SKIP", _gotoLastPage),
          ),
          _buildNavIndicator(),
          _isFinalPage
              ? _buildButton("DONE", widget.onIntroCompleted)
              : _buildButton("NEXT", _gotoNextPage),
        ],
      ),
    );
  }

  Widget _buildButton(String title, VoidCallback callback) {
    return FlatButton(
      child: Text(
        title,
        style: TextStyle(color: Colors.white),
      ),
      onPressed: callback,
    );
  }

  void _gotoLastPage() {
    _pageController.animateToPage(
      widget.pages.length - 1,
      duration: const Duration(milliseconds: 600),
      curve: Curves.ease,
    );
  }

  void _gotoNextPage() {
    _pageController.nextPage(
      duration: const Duration(milliseconds: 600),
      curve: Curves.easeInOut,
    );
  }

  Widget _buildNavIndicator() {
    final indicatorList = <Widget>[];
    for (int i = 0; i < widget.pages.length; i++)
      indicatorList.add(_buildIndicator(i == _currentPage));
    return Row(children: indicatorList);
  }

  Widget _buildIndicator(bool isActive) {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: isActive ? Colors.white : Colors.white30,
        ),
        child: SizedBox(width: 8, height: 8),
      ),
    );
  }
}

Usage:

import 'package:flutter/material.dart';
import 'package:flutter_app_test3/my_intro_view.dart';

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyIntroView(
      pages: <Widget>[
        Image.asset("assets/images/1.png", fit: BoxFit.cover),
        Image.asset("assets/images/2.png", fit: BoxFit.cover),
        Image.asset("assets/images/3.jpg", fit: BoxFit.cover),
      ],
      onIntroCompleted: () {
        print("Into is Completed");
        //To the navigation stuff here
      },
    );
  }
}

Ask me if you have any doubts in the comment

Comments

[Crazy Lazy Cat]

Did you specify your assets in pubspec.yaml? if not read this document

[webdesignnoob]

@Crazy Lazy Cat I did not! I added and it works now thank you so much! Would you happen to know how to move the image up? I'm trying to make it take up the whole screen, but when I resize it, it seems to go down. Or would you recommend me creating a new post?

[Crazy Lazy Cat]

if possible, can you add screen shot of what do you want to achieve?

[webdesignnoob]

@CrazyLazyCat Sure, I edited my post. Thanks for taking a look!

[webdesignnoob]

Wow! Thank you so much. Sorry, I'm a bit new to this, so would I have to make a new file for the new intro widget? Or would I put both codes into my main.dart file?

[webdesignnoob]

Nevermind, I figured it out. Thank you so much for your help, it worked nicely!