Flutter ile Navbar Tasarlama


Görsel Referansı


Bu incelemede sizlerle birlikte adım adım Flutter'da Navbar tasarlamayı öğreneceğiz. GoogleNavBar, Aurelien Salomon tarafından tasarlanan ve sooxt98 tarafından geliştirilen bir Flutter widget'idir.


  • İlk olarak pubspec.yaml dosyasına aşağıdaki kodu ekleyin.

...
dependencies:
google_nav_bar: ^4.0.2

  • Artık, aşağıdaki Dart kodunu import edip kullanabilirsiniz:

import 'package:google_nav_bar/google_nav_bar.dart';


Kullanımı

  • GNav özelliğiyle sekmenizin stilini global olarak belirleyin, sekmeyi ayrı ayrı biçimlendirmek istiyorsanız GButton'un özelliğini kullanabilirsiniz.

GNav(
 rippleColor: Colors.grey[800], //butona  bastığın an rengin dalgalnaması
 hoverColor: Colors.grey[700], //fare üzerine gelince rengin değişmesi
 haptic: true, //geri bildirim
 tabBorderRadius: 15, 
 tabActiveBorder: Border