Je travaille sur un projet pour mon projet universitaire et j'ai un problème.

Tout d'abord, je veux ajouter un retour à mon écran d'accueil, mais j'utilise déjà align pour "suivant" en bas à droite alors que je veux le retour en bas à gauche

Deuxièmement, je veux placer le titre (bienvenue, objectif, créateur) au milieu, mais je ne peux pas le mettre au centre car j'utilise une boîte de taille

Troisièmement, je veux que l'écran d'accueil n'apparaisse qu'une seule fois, donc lorsqu'un utilisateur qui l'a ouvert ne le verra plus (essentiellement la première fois, l'écran d'accueil mais la deuxième fois directement sur la page d'accueil)

Désolé pour mon anglais photo si vous voulez visualiser : Photo Voici le code :

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

import '../home_screen.dart';

class Onboarding extends StatefulWidget {
  @override
  _OnboardingScreen createState() => _OnboardingScreen();
}

class _OnboardingScreen extends State<Onboarding> {
  final int _numPages = 3;
  final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  List<Widget> _buildPageIndicator() {
    List<Widget> list = [];
    for (int i = 0; i < _numPages; i++) {
      list.add(i == _currentPage ? _indicator(true) : _indicator(false));
    }
    return list;
  }

  Widget _indicator(bool isActive) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 150),
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      height: 8.0,
      width: isActive ? 24.0 : 16.0,
      decoration: BoxDecoration(
        color: isActive ? Colors.white : Color(0xFF7B51D3),
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.1, 0.4, 0.7, 0.9],
              colors: [
                Colors.black,
                Color(0xff112339),
                Color(0xff112339),
                Colors.black,
              ],
            ),
          ),
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 40.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  alignment: Alignment.centerRight,
                  child: FlatButton(
                    onPressed: () {
                      Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => HomePage()),
                      );
                    },
                    child: Text(
                      'Skip',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 600.0,
                  child: PageView(
                    physics: ClampingScrollPhysics(),
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top:70.0,left: 40.0,right: 40.0,),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/Logo.png',
                                ),
                                height: 120.0,
                                width: 120.0,
                              ),
                            ),
                            SizedBox(height: 50.0),
                            Text(
                              'Welcome',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 21.0,
                                height: 1.5,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'Welcome to Moviez, the place where you will spend your time magically',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.0,
                                height: 1.2,
                                fontFamily: 'Raleway',
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top:70.0,left: 40.0,right: 40.0,),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/Logo.png',
                                ),
                                height: 120.0,
                                width: 120.0,
                              ),
                            ),
                            SizedBox(height: 50.0),
                            Text(
                              'Purpose',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 21.0,
                                height: 1.5,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'This App is for educational purposes only',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.0,
                                height: 1.2,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top:70.0,left: 40.0,right: 40.0,),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/Logo.png',
                                ),
                                height: 120.0,
                                width: 120.0,
                              ),
                            ),
                            SizedBox(height: 50.0),
                            Text(
                              'Creator',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 21.0,
                                height: 1.5
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'Adela, Caroline, Cordellya, David, Valentino',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.0,
                                height: 1.2,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: _buildPageIndicator(),
                ),
                _currentPage != _numPages - 1
                    ? Expanded(
                        child: Align(
                          alignment: FractionalOffset.bottomRight,
                          child: FlatButton(
                            onPressed: () {
                              _pageController.nextPage(
                                duration: Duration(milliseconds: 500),
                                curve: Curves.ease,
                              );
                            },
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Text(
                                  'Next',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 22.0,
                                  ),
                                ),
                                SizedBox(width: 10.0),
                                Icon(
                                  Icons.arrow_forward,
                                  color: Colors.white,
                                  size: 30.0,
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                    : Text(''),
              ],
            ),
          ),
        ),
      ),
      bottomSheet: _currentPage == _numPages - 1
          ? Container(
              height: 100.0,
              width: double.infinity,
              color: Colors.white,
              child: GestureDetector(
               onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => HomePage()),
                );
                },
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 30.0),
                    child: Text(
                      'Get started',
                      style: TextStyle(
                        color: Color(0xFF5B16D0),
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            )
          : Text(''),
    );
  }
}

Voici mon main.dart

import 'package:flutter/material.dart';
import 'package:movie_app/screens/home_screen/widgets/onboard.dart';
import 'screens/home_screen/home_screen.dart';

void main() {
  runApp(MyApp());
  Paint.enableDithering = true;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Movie App',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          iconTheme: IconThemeData(
            color: Colors.white,
          ),
          textTheme: ThemeData.light().textTheme.copyWith(
                bodyText1: TextStyle(
                  // fontFamily: 'OpenSans',
                  // fontWeight: FontWeight.bold,
                  fontSize: 22,
                  color: Colors.white,
                ),
                button: TextStyle(
                  color: Colors.white,
                ),
              ),
          appBarTheme: AppBarTheme(
            iconTheme: IconThemeData(color: Colors.white),
            actionsIconTheme: IconThemeData(size: 30),
          )),
      home: Onboarding(),
    );
  }
}
-1
David 16 mars 2021 à 16:26

1 réponse

Meilleure réponse

Réponse à votre premier point : En supposant que vous vouliez le bouton "retour" sur la même ligne que le "suivant", je vous suggère de modifier votre widget Row comme suit.

Row(children: [
  Icon(Icons.arrow_back),
  Text('Back'),
  Spacer(),
  Text('Next'),
  Icon(Icons.arrow_forward),
])

J'ai utilisé deux widgets Text juste pour vous montrer à quoi cela ressemblerait. Dans votre application, vous pouvez utiliser deux boutons différents avec un texte différent et des méthodes onTap ou onPressed différentes. Vous pouvez consulter la section Button de cette page pour en savoir plus sur les différents boutons disponibles dans Flutter.

Deuxièmement : je pense que tout ce que vous avez à faire pour que vos titres soient centrés sur l'écran est de changer la propriété crossAxisAlignment du formulaire Column associé CrossAxisAlignment.start en CrossAxisAlignment.center

0
GBerga 16 mars 2021 à 17:52