Flutter side menu (Custom Drawer Menu)

BurakcanSEZGN

Herkese merhaba,

https://pub.dev/packages/kf_drawer#-readme-tab-
https://github.com/qqmikey/kf_drawer

Yukarıdaki linklerde bulunan CustomDrawer Menüyü oluştururken sorunlarla karşılaşıyorum. Bununla ilgili bilgisi olan kullanımını örnekleyebilecek birisi var mı ?

Not : Normal Drawer Menü değil.

Flutter

BurakcanSEZGN Merhaba.
Linklerdeki kodlar artık çalışmıyor ya da eksik
Bunun yerine repoda bir örnek oluşturdum.
Bunu kullanabilirsin.
Link : github

BurakcanSEZGN

Cok tesekkur ederim. Incelemerim sonucu bu proje benden baskasi kullanabilir diye burada nasil eklenir kismini anlaticam.

Oncelikle kutuphaneyi import edelim.

“pubspec.yml” => icinde 22′nci rowdan itibaren koyabilirsiniz sirasina dikkat edin.

kf_drawer: ^1.1.2

Kaydet (otomatik projeye eklensin kutuphane).

Drawer in kendisini olusturalim.

Main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:kf_drawer/kf_drawer.dart'; => kEklenen kutuphane importu
import 'utils/class_builder.dart';  => utils import yani drawer de kullanicak oldugumuz itemlar(sayfalar)

void main() {
  ClassBuilder.registerClasses();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainWidget(),
    );
  }
}

class MainWidget extends StatefulWidget {
  MainWidget({Key key, this.title}) : super(key: key);
  final String title;

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

class _MainWidgetState extends State<MainWidget> with TickerProviderStateMixin {
  KFDrawerController _drawerController;

  @override
          void initState() {  //initState sayfa yuklenmeden verilerin hazirlanmasini istedigimiz widgetlar yada nesneler icin 
                                     //kullanilir.
    super.initState();
    _drawerController = KFDrawerController(
      initialPage: ClassBuilder.fromString('MainPage'),
      items: [  // => Drawer menulerinin baslangici
        KFDrawerItem.initWithPage(
          text: Text('MAIN', style: TextStyle(color: Colors.white)),
          icon: Icon(Icons.home, color: Colors.white),
          page: MainPage(),
        ),
        KFDrawerItem.initWithPage(
          text: Text(
            'CALENDAR',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(Icons.calendar_today, color: Colors.white),
          page: CalendarPage(),
        ),
        KFDrawerItem.initWithPage(
          text: Text(
            'SETTINGS',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(Icons.settings, color: Colors.white),
          page: ClassBuilder.fromString('SettingsPage'),
        ),
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: KFDrawer(
//        borderRadius: 0.0,
//        shadowBorderRadius: 0.0,
//        menuPadding: EdgeInsets.all(0.0),
//        scrollable: true,
        controller: _drawerController,
        header: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            width: MediaQuery.of(context).size.width * 0.6,
            child: Image.asset(
              'assets/logo.png',
              alignment: Alignment.centerLeft,
            ),
          ),
        ),
        footer: KFDrawerItem(
          text: Text(
            'SIGN IN',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(
            Icons.input,
            color: Colors.white,
          ),
          onPressed: () {
            Navigator.of(context).push(CupertinoPageRoute(
              fullscreenDialog: true,
              builder: (BuildContext context) {
                return AuthPage();
              },
            ));
          },
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color.fromRGBO(255, 255, 255, 1.0), Color.fromRGBO(44, 72, 171, 1.0)],
            tileMode: TileMode.repeated,
          ),
        ),
      ),
    );
  }
}

Bu sekilde yukarida 3 +1 (signOut) tane sayfa nesnesi ekli ve bunlar icinde class olusturmaliyiz.

object oriented yapisina gore ilerleyelim ve lib icerisine bir “Folder” acalim.(ui isminde)
Ui Folderinin icinede 3 + 1 = 4 tane sayfa dart dosyasi acalim ornegin :

auth_page.dart (signOut icin)
calender_page.dart
main_page.dart
settings.dart

Auth_Page.dart

import 'package:flutter/material.dart';

class AuthPage extends StatefulWidget {
  @override
  _AuthPageState createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SafeArea(
          child: Center(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(32.0)),
                      child: Material(
                        shadowColor: Colors.transparent,
                        color: Colors.transparent,
                        child: IconButton(
                          icon: Icon(
                            Icons.menu,
                            color: Colors.black,
                          ),
                          onPressed: () {
                            Navigator.of(context).pop(); // sadece click yapar.
                          },
                        ),
                      ),
                    ),
                  ],
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('Sign in'), //sadece text ozelligi var icinde 
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Calender_Page.dart

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

class CalendarPage extends KFDrawerContent {
  @override
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(32.0)),
                  child: Material(
                    shadowColor: Colors.transparent,
                    color: Colors.transparent,
                    child: IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Colors.black,
                      ),
                      onPressed: widget.onMenuPressed,
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Calendar'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
    ;
  }
}

Main_Page.dart

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

class MainPage extends KFDrawerContent {
  MainPage({
    Key key,
  });

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

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(32.0)),
                  child: Material(
                    shadowColor: Colors.transparent,
                    color: Colors.transparent,
                    child: IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Colors.black,
                      ),
                      onPressed: widget.onMenuPressed,
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Main'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Settings.dart

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

class SettingsPage extends KFDrawerContent {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(32.0)),
                  child: Material(
                    shadowColor: Colors.transparent,
                    color: Colors.transparent,
                    child: IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Colors.black,
                      ),
                      onPressed: widget.onMenuPressed,
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Settings'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
    ;
  }
}

Click islemi olacak olan sayfalarimizda eklendikten sonra Main.dart uzerinde bunlari import edin.

import 'package:drawer/ui/auth_page.dart';
import 'package:drawer/ui/calender_page.dart';
import 'package:drawer/ui/main_page.dart';

Son olarak bunlarin map olayini olusturmakta. ClassBuilder.dart diye bir dosya olusturun. Bunuda Utils Folderine tasiyin ya da icerisinde olusturun.

import 'package:drawer/ui/calender_page.dart';
import 'package:drawer/ui/main_page.dart';
import 'package:drawer/ui/settings.dart';

typedef T Constructor<T>();

final Map<String, Constructor<Object>> _constructors = <String, Constructor<Object>>{};

void register<T>(Constructor<T> constructor) {
  _constructors[T.toString()] = constructor;
}

class ClassBuilder {
  static void registerClasses() {
    register<MainPage>(() => MainPage());
    register<CalendarPage>(() => CalendarPage());
    register<SettingsPage>(() => SettingsPage());
  }

  static dynamic fromString(String type) {
    return _constructors[type]();
  }
}

Hersey tamam. Tek unuttugumuz Drawer uzerinde en ustte bulunucak olan siz diyin profile resmi ben diyim herhangi bir image lakin koyduk ve kodlarimiz da mevcut bu yuzden proje icerisine bir folder acip ismini “assets” yapip icerisine herhangi bir logo.png yada kendiniz belirleyebilirsiniz resim atip bunu pubspec.yml de tanitin o da su sekilde


assets:
  - assets/logo.png
  #  - images/a_dot_ham.jpeg

Yeni proje olusturanlarda bunlar comment icerisinde olacaktir baslarindaki commenti silerseniz ve benim tanittigim gibi tanitirsaniz. Proje sorunsuz acilacaktir.

Not : Pubspec.yml icerisinde yapilan her degisiklikte verilen herhangi bir karakter cok onemlidir. Fazladan bir tane bosluk atilmasi bile projenin calismamasi veyahut istenilen nesnenin gosterilmemesine sebep olur. Bu yuzden dikkatli yapmanizda fayda var.