Profile View

2021-03-22 16:49:24 +02:00
parent 8f86ec409d
commit 1381647a3d
28 changed files with 645 additions and 154 deletions
@@ -0,0 +1,103 @@
+import 'package:flutter/material.dart';
+
+class AboutView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        centerTitle: false,
+        backgroundColor: Colors.grey[200],
+        title: Text(
+          "A Propos",
+          style: TextStyle(
+            color: Colors.black,
+          ),
+        ),
+        iconTheme: IconThemeData(
+          color: Color(0xFF545454), //change your color here
+        ),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.max,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Column(
+              children: [
+                Text(
+                  "Le Kiosque",
+                  style: TextStyle(
+                    fontSize: 26,
+                    color: Color(0xFF484848),
+                  ),
+                ),
+                SizedBox(
+                  height: 10,
+                ),
+                Text(
+                  "Version 1.0.0",
+                  style: TextStyle(
+                    fontSize: 17,
+                  ),
+                )
+              ],
+            ),
+            Container(
+              decoration: BoxDecoration(
+                color: Colors.white,
+                image: DecorationImage(
+                  image: AssetImage("assets/images/kiosque_logo.png"),
+                ),
+                borderRadius: BorderRadius.all(
+                  Radius.circular(50),
+                ),
+                border: Border.all(
+                  color: Colors.white,
+                  width: 8,
+                ),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.grey.withOpacity(0.5),
+                    spreadRadius: 2,
+                    blurRadius: 2,
+                    offset: Offset(0, 1), // changes position of shadow
+                  )
+                ],
+              ),
+              height: 100,
+              width: 100,
+            ),
+            Text(
+              "Copyright 2020 Le Kiosque",
+              style: TextStyle(
+                fontSize: 17,
+              ),
+            ),
+            Column(
+              children: [
+                Text(
+                  "From",
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                SizedBox(
+                  height: 10,
+                ),
+                Text(
+                  "ZX CONNECT",
+                  style: TextStyle(
+                    fontSize: 22,
+                    fontWeight: FontWeight.bold,
+                  ),
+                )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,110 @@
+import 'package:flutter/material.dart';
+import 'package:le_kiosque_by_gcs/services/auth/auth.dart';
+import 'package:provider/provider.dart';
+
+import '../custom/custom_elevated_button.dart';
+
+class AuthView extends StatelessWidget {
+
+
+  Future<void> _signWithGoogle(context) async {
+    final auth = Provider.of<Auth>(context, listen: false);
+    try {
+      await auth.signInWithGoogle();
+    } catch (e) {
+      print("Error $e");
+    }
+  }
+
+  Future<void> _signInWithFacebook(context) async {
+    final auth = Provider.of<Auth>(context, listen: false);
+    try {
+      await auth.signInWithFacebook();
+    } catch (e) {
+      print("Error $e");
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.grey[200],
+      resizeToAvoidBottomInset: false,
+      body: ListView(
+        children: [
+          Container(
+            height: 470,
+            decoration: BoxDecoration(
+              image: DecorationImage(
+                image: AssetImage("assets/images/login_back.png"),
+                fit: BoxFit.cover,
+              ),
+            ),
+          ),
+          Expanded(
+            child: Transform.translate(
+              offset: Offset(0, -50),
+              child: Container(
+                width: double.infinity,
+                decoration: BoxDecoration(
+                  color: Colors.grey[200],
+                  borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(30),
+                    topRight: Radius.circular(30),
+                  ),
+                ),
+                child: Padding(
+                  padding: const EdgeInsets.only(
+                    top: 32,
+                    left: 24,
+                    right: 24,
+                    bottom: 24,
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      Text(
+                        "S'identifier",
+                        style: TextStyle(
+                            fontSize: 26,
+                            fontWeight: FontWeight.bold,
+                            color: Colors.black,
+                            inherit: false),
+                      ),
+                      SizedBox(height: 32),
+                      CustomElevatedButton(
+                        imageAsset: "assets/images/google_logo.png",
+                        color: Colors.white,
+                        textColor: Colors.black,
+                        onPressed: () => _signWithGoogle(context),
+                        text: "Se connecter avec Google",
+                      ),
+                      SizedBox(height: 24),
+                      CustomElevatedButton(
+                        imageAsset: "assets/images/facebook_logo.png",
+                        color: Color(0xFF334D92),
+                        textColor: Colors.white,
+                        onPressed: () => _signInWithFacebook(context),
+                        text: "Se connecter avec Facebook",
+                      ),
+                      SizedBox(
+                        height: 24,
+                      ),
+                      Text(
+                        "En vous connectant, vous acceptez nos conditions et termes d'utilisation.",
+                        style: TextStyle(
+                          inherit: false,
+                          color: Colors.black87,
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,88 @@
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:flutter/material.dart';
+import 'package:le_kiosque_by_gcs/model/magazine.dart';
+
+class DetailMagazine extends StatefulWidget {
+  final List<Magazine> magazines;
+  final String toolbarTitle;
+
+  DetailMagazine({
+    Key key,
+    @required this.magazines,
+    @required this.toolbarTitle,
+  }) : super(key: key);
+
+  @override
+  _DetailMagazineState createState() => _DetailMagazineState();
+}
+
+class _DetailMagazineState extends State<DetailMagazine> {
+  String _currentSummary;
+
+  @override
+  void initState() {
+    _updateSummary(widget.magazines[0].summaryText);
+    super.initState();
+  }
+
+  _updateSummary(String newText) {
+    setState(() {
+      _currentSummary = newText;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Container(
+            child: CarouselSlider.builder(
+              itemCount: widget.magazines.length,
+              itemBuilder: (context, index, realIndex) => Container(
+                width: MediaQuery.of(context).size.width,
+                margin: EdgeInsets.symmetric(horizontal: 5.0),
+                child: Container(
+                  height: 235,
+                  width: 168,
+                  decoration: BoxDecoration(
+                    shape: BoxShape.rectangle,
+                    borderRadius: BorderRadius.all(
+                      Radius.circular(5),
+                    ),
+                    image: DecorationImage(
+                      image: NetworkImage(widget.magazines[index].urlCover),
+                      fit: BoxFit.cover,
+                    ),
+                  ),
+                ),
+              ),
+              options: CarouselOptions(
+                height: 400,
+                pageSnapping: true,
+                enableInfiniteScroll: false,
+                enlargeCenterPage: true,
+                onPageChanged: (index, _) {
+                  _updateSummary(widget.magazines[index].summaryText);
+                }
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Text(
+              _currentSummary,
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                fontSize: 16,
+                color: Colors.white,
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class EditProfileView extends StatefulWidget {
+  @override
+  _EditProfileViewState createState() => _EditProfileViewState();
+}
+
+class _EditProfileViewState extends State<EditProfileView> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+          iconTheme: IconThemeData(
+            color: Color(0xFF545454), //change your color here
+          )
+      ),
+      body: Container(
+        width: double.infinity,
+
+      ),
+    );
+  }
+}
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:le_kiosque_by_gcs/model/magazine.dart';
+import 'package:le_kiosque_by_gcs/ui/custom/item_mag_row.dart';
+import 'package:le_kiosque_by_gcs/ui/custom/item_mag_row_newest.dart';
+
+class HomeView extends StatelessWidget {
+
+
+  @override
+  Widget build(BuildContext context) {
+
+    final summary = "Voyez ce jeu exquis wallon, de graphie en kit mais bref. Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l\"alcôve ovoïde, où les bûches se consument dans l\"âtre";
+    final url = "https://miningandbusiness.com/wp-content/uploads/2021/02/03f19c3a-1d92-4be7-ac54-f52b37e626ad-561x771.jpg";
+    final urlPrd = "http://www.africau.edu/images/default/sample.pdf";
+
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: CustomScrollView(
+          slivers: [
+            ItemMagRowNewest(magazines: [Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)]),
+            ItemMagRow(rowTitle: "Buzzz Magazine", magazines: [Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)]),
+            ItemMagRow(rowTitle: "Hamaji Magazine", magazines: [Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)]),
+            ItemMagRow(rowTitle: "Mining and buziness", magazines: [Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)]),
+            ItemMagRow(rowTitle: "Declic Car Magazine", magazines: [Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)]),
+            ItemMagRow(rowTitle: "Congo Airways", magazines: [Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary), Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)]),
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,34 @@
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:flutter/material.dart';
+import 'package:le_kiosque_by_gcs/services/auth/auth.dart';
+import 'package:le_kiosque_by_gcs/ui/view/auth.dart';
+import 'package:le_kiosque_by_gcs/ui/view/main.dart';
+import 'package:provider/provider.dart';
+
+class LandingPageView extends StatelessWidget {
+
+  @override
+  Widget build(BuildContext context) {
+
+    final auth = Provider.of<Auth>(context, listen: false);
+    return StreamBuilder<User>(
+        stream: auth.authStateChanges(),
+        builder: (context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.active) {
+            if (snapshot.data == null) {
+              return AuthView();
+            } else {
+              return MainView();
+            }
+          }
+          else {
+            return Scaffold(
+              body: Center(
+                child: CircularProgressIndicator(),
+              ),
+            );
+          }
+        }
+    );
+  }
+}
@@ -0,0 +1,142 @@
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:le_kiosque_by_gcs/ui/view/home.dart';
+import 'package:le_kiosque_by_gcs/ui/view/news.dart';
+import 'package:le_kiosque_by_gcs/ui/view/profile.dart';
+import 'package:le_kiosque_by_gcs/ui/view/search.dart';
+import 'package:le_kiosque_by_gcs/ui/view/setting/setting.dart';
+import 'package:le_kiosque_by_gcs/ui/view/subscription/subscription.dart';
+
+class MainView extends StatefulWidget {
+  @override
+  _MainViewState createState() => _MainViewState();
+}
+
+class _MainViewState extends State<MainView> {
+  int _selectedIndex = 0;
+
+  List<Widget> _widgetOptions = [
+    HomeView(),
+    NewsView(),
+    SubscriptionView(),
+    ProfileView()
+  ];
+
+  List<String> _labels = ["Accueil", "A la une", "Abonnement", "Mon profil"];
+
+  void _onItemTapped(int index) {
+    setState(() {
+      _selectedIndex = index;
+    });
+  }
+
+  _showSettingView(BuildContext context) {
+    Navigator.of(context).push(
+      MaterialPageRoute(
+        builder: (_) => SettingView(),
+      ),
+    );
+  }
+
+  void _showSearchView(BuildContext context) {
+    Navigator.of(context).push(
+      MaterialPageRoute(
+        builder: (_) => SearchView(),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        centerTitle: false,
+        title: Text(
+          _labels[_selectedIndex],
+          style: TextStyle(
+            color: Colors.black,
+          ),
+        ),
+        leading: Builder(
+          builder: (BuildContext context) {
+            return Padding(
+              padding: const EdgeInsets.only(left: 16),
+              child: Image.asset("assets/images/kiosque_logo.png"),
+            );
+          },
+        ),
+        elevation: 4,
+        actions: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Opacity(
+              opacity: _selectedIndex == 2 ? 0 : 1,
+              child: Container(
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: Color(0xFFF1F1F1),
+                ),
+                child: TextButton(
+                  onPressed: () {
+                    if (_selectedIndex == 3) {
+                      _showSettingView(context);
+                    } else {
+                      _showSearchView(context);
+                    }
+                  },
+                  child: Icon(
+                    _selectedIndex == 3 ? Icons.settings : Icons.search,
+                    color: Colors.grey,
+                  ),
+                ),
+              ),
+            ),
+          )
+        ],
+        backgroundColor: Colors.white,
+      ),
+      body: _widgetOptions[_selectedIndex],
+      bottomNavigationBar: _buildBottomNavigationBar(),
+    );
+  }
+
+  BottomNavigationBar _buildBottomNavigationBar() {
+    return BottomNavigationBar(
+      currentIndex: _selectedIndex,
+      type: BottomNavigationBarType.fixed,
+      onTap: _onItemTapped,
+      selectedItemColor: Colors.grey,
+      items: [
+        BottomNavigationBarItem(
+          icon: Icon(
+            Icons.home_rounded,
+            color: Colors.grey,
+          ),
+          label: _labels[0],
+        ),
+        BottomNavigationBarItem(
+          icon: Icon(
+            Icons.subscriptions_rounded,
+            color: Colors.grey,
+          ),
+          label: _labels[1],
+        ),
+        BottomNavigationBarItem(
+          icon: Icon(
+            Icons.amp_stories_rounded,
+            color: Colors.grey,
+          ),
+          label: _labels[2],
+        ),
+        BottomNavigationBarItem(
+          icon: Icon(
+            Icons.people_rounded,
+            color: Colors.grey,
+          ),
+          label: _labels[3],
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,8 @@
+import 'package:flutter/cupertino.dart';
+
+class NewsView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}
@@ -0,0 +1,51 @@
+import 'package:advance_pdf_viewer/advance_pdf_viewer.dart';
+import 'package:flutter/material.dart';
+
+class PdfReader extends StatefulWidget {
+  const PdfReader({
+    Key key,
+    this.pdfUrl,
+  }) : super(key: key);
+
+  final String pdfUrl;
+
+  @override
+  _PdfReaderState createState() => _PdfReaderState();
+}
+
+class _PdfReaderState extends State<PdfReader> {
+  bool isLoading = true;
+  PDFDocument document;
+
+  @override
+  void initState() {
+    super.initState();
+    loadDocument();
+  }
+
+  loadDocument() async {
+    try {
+      document = await PDFDocument.fromURL('https://pdftron.s3.amazonaws.com/downloads/pdfref.pdf');
+      setState(() => isLoading = false);
+    } catch(e) {
+      print(e);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+        iconTheme: IconThemeData(
+          color: Color(0xFF545454), //change your color here
+        ),
+      ),
+      body: Center(
+        child: isLoading
+            ? CircularProgressIndicator()
+            : PDFViewer(document: document),
+      ),
+    );
+  }
+}
@@ -0,0 +1,153 @@
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:flutter/material.dart';
+import 'package:le_kiosque_by_gcs/model/magazine.dart';
+import 'package:le_kiosque_by_gcs/ui/custom/item_mag_large.dart';
+import 'package:le_kiosque_by_gcs/ui/custom/profile_picture.dart';
+import 'package:le_kiosque_by_gcs/ui/view/edit_profil.dart';
+
+class ProfileView extends StatefulWidget {
+  @override
+  _ProfileViewState createState() => _ProfileViewState();
+}
+
+class _ProfileViewState extends State<ProfileView> {
+  @override
+  Widget build(BuildContext context) {
+    // TODO Removig
+    final summary =
+        "Voyez ce jeu exquis wallon, de graphie en kit mais bref. Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l\"alcôve ovoïde, où les bûches se consument dans l\"âtre";
+    final url =
+        "https://miningandbusiness.com/wp-content/uploads/2021/02/03f19c3a-1d92-4be7-ac54-f52b37e626ad-561x771.jpg";
+    final urlPrd = "http://www.africau.edu/images/default/sample.pdf";
+
+    final magazines = [
+      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
+      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
+      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
+      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
+      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)
+    ];
+    return Scaffold(
+      body: CustomScrollView(
+        slivers: [
+          SliverToBoxAdapter(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                _buildProfileHeader(),
+                SizedBox(height: 24),
+                Padding(
+                  padding: const EdgeInsets.only(
+                    left: 16,
+                    top: 34,
+                    right: 16,
+                    bottom: 16,
+                  ),
+                  child: Text(
+                    "A lire plus tard",
+                    style: TextStyle(
+                      fontSize: 22,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                )
+              ],
+            ),
+          ),
+          SliverPadding(
+            padding: EdgeInsets.all(16),
+            sliver: SliverGrid(
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 2,
+                mainAxisSpacing: 16.0,
+                crossAxisSpacing: 16.0,
+                mainAxisExtent: 250
+              ),
+              delegate: SliverChildBuilderDelegate(
+                (context, int index) => ItemMagLarge(magazine: magazines[index]),
+                childCount: magazines.length,
+              ),
+            ),
+          ),
+        ],
+      ),
+      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
+      floatingActionButton: Visibility(
+        child: FloatingActionButton.extended(
+          onPressed: () => _showEditProfileView(context),
+          label: const Text(
+            'Editer',
+            style: TextStyle(
+              color: Color(0XFFFF567E),
+            ),
+          ),
+          icon: const Icon(
+            Icons.edit,
+            color: Color(0XFFFF567E),
+          ),
+          backgroundColor: Colors.white,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildProfileBody() {
+    return Container(
+      width: double.infinity,
+      decoration: BoxDecoration(
+        color: Color(0xFFF8F8F8),
+        borderRadius: BorderRadius.only(
+          topLeft: Radius.circular(30),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildProfileHeader() {
+    final imageUrl = FirebaseAuth.instance.currentUser.photoURL;
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Center(
+          child: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: ProfilePicture(imageUrl: imageUrl),
+          ),
+        ),
+        Text(
+          "Eric Ampire",
+          style: TextStyle(
+            fontSize: 26,
+            color: Colors.black,
+          ),
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Icon(
+                Icons.location_on,
+                color: Color(0xFFA5A5A5),
+                size: 17,
+              ),
+            ),
+            Text(
+              "Lubumbashi",
+              style: TextStyle(color: Colors.grey),
+            )
+          ],
+        )
+      ],
+    );
+  }
+
+  _showEditProfileView(BuildContext context) {
+    Navigator.of(context).push(
+      MaterialPageRoute(
+        builder: (BuildContext context) => EditProfileView(),
+      ),
+    );
+  }
+}
@@ -0,0 +1,8 @@
+import 'package:flutter/cupertino.dart';
+
+class SearchView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}
@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+class ItemLogout extends StatelessWidget {
+  final String title;
+
+  const ItemLogout({
+    Key key,
+    this.title,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            title,
+            style: TextStyle(
+              fontSize: 18,
+              color: Color(0xFF56B4FC),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class ItemTitleGroup extends StatelessWidget {
+
+  const ItemTitleGroup({
+    Key key,
+    this.groupTitle,
+  }) : super(key: key);
+
+  final String groupTitle;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Text(
+          groupTitle,
+          style: TextStyle(
+            fontSize: 23,
+            color: Color(0xFFA7A7A7),
+          ),
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class ItemTitleSetting extends StatelessWidget {
+  const ItemTitleSetting({
+    Key key,
+    this.title,
+  }) : super(key: key);
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            title,
+            style: TextStyle(
+              fontSize: 18,
+              color: Colors.black,
+            ),
+          ),
+          Icon(
+            Icons.arrow_forward_ios_rounded,
+            color: Colors.black,
+          )
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,107 @@
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:flutter/material.dart';
+import 'package:le_kiosque_by_gcs/services/auth/auth.dart';
+import 'package:le_kiosque_by_gcs/ui/custom/dialog.dart';
+import 'package:le_kiosque_by_gcs/ui/view/about.dart';
+import 'package:le_kiosque_by_gcs/ui/view/setting/item_logout.dart';
+import 'package:le_kiosque_by_gcs/ui/view/setting/item_title_group.dart';
+import 'package:provider/provider.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+
+import 'item_title_setting.dart';
+
+class SettingView extends StatelessWidget {
+  _navigateToAboutView(BuildContext context) {
+    Navigator.of(context).push(
+      MaterialPageRoute(
+        builder: (_) {
+          return AboutView();
+        },
+      ),
+    );
+  }
+
+  final String licenceUrl = "http://example.com";
+
+  _showTermAndCond(BuildContext context) async {
+    if (await canLaunch(licenceUrl)) {
+      await launch(licenceUrl);
+    } else {
+      throw 'Could not launch $licenceUrl';
+    }
+  }
+
+  _showLicence(BuildContext context) async {
+    if (await canLaunch(licenceUrl)) {
+      await launch(licenceUrl);
+    } else {
+      throw 'Could not launch $licenceUrl';
+    }
+  }
+
+  _changeLanguage(BuildContext context) async {
+
+  }
+
+  _showLogoutDialog(BuildContext context) async {
+    final auth = Provider.of<Auth>(context, listen: false);
+    final isConfirm = await showAlertDialog(
+      context: context,
+      title: "Deconnexion",
+      contentMessage: "Êtes-vous sûr de vouloir continuer",
+      confirmText: "Oui",
+      cancelText: "Non",
+    );
+
+    if (isConfirm) {
+      await auth.signOut();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        centerTitle: false,
+        backgroundColor: Colors.white,
+        title: Text(
+          "Paramètres",
+          style: TextStyle(
+            color: Colors.black,
+          ),
+        ),
+        iconTheme: IconThemeData(
+          color: Color(0xFF545454), //change your color here
+        ),
+      ),
+      body: ListView(
+        children: [
+          ItemTitleGroup(groupTitle: "Compte"),
+          InkWell(
+            child: ItemTitleSetting(title: "Changer la langue"),
+            onTap: () => _changeLanguage(context),
+          ),
+          ItemTitleGroup(groupTitle: "Autres"),
+          InkWell(
+            child: ItemTitleSetting(title: "Termes & Conditions"),
+            onTap: () => _showTermAndCond(context),
+          ),
+          InkWell(
+            child: ItemTitleSetting(title: "Licence"),
+            onTap: () => _showLicence(context),
+          ),
+          InkWell(
+            child: ItemTitleSetting(title: "A propos"),
+            onTap: () => _navigateToAboutView(context),
+          ),
+          SizedBox(height: 16),
+          InkWell(
+            child: ItemLogout(title: "Deconnexion"),
+            onTap: () => _showLogoutDialog(context),
+          )
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,46 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class SubscriptionView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Container(
+            height: 286,
+            width: 317,
+            child: Image.asset("assets/images/mags.png"),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(24.0),
+            child: Text(
+              "Voyez ce jeu exquis wallon, de graphie en kit mais bref. Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l\"alcôve ovoïde, où les bûches se",
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                fontSize: 17,
+              ),
+            ),
+          ),
+          SizedBox(
+            width: 200,
+            child: FloatingActionButton.extended(
+              onPressed: () => _buyNow(context),
+              label: const Text(
+                'Payer maintenant',
+                style: TextStyle(
+                  color: Colors.white,
+                ),
+              ),
+              backgroundColor: Color(0XFF2571F3),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  _buyNow(BuildContext context) {}
+}