SideBar In Flutter

SideBar In Flutter :

This flutter tutorial post sideBar In flutter. This is used to contanct no.

Screenshot :

main.dart

import 'package:flutter/material.dart';

import 'sider_bar.dart';

void main() => runApp(new MyApp());

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

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

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String content = "ABCDEFGHIGKLMNOPQRSTUVWXYZ";
  ScrollController _controller = ScrollController();
  List<String> store = new List();


  List<String> mDataList;

  @override
  void initState() {
    super.initState();
    store.add('A');
    store.add('B');
    store.add('C');
    store.add('D');
    store.add('E');
    store.add('F');
    store.add('G');
    store.add('H');
    store.add('I');
    store.add('J');
    store.add('K');
    store.add('L');
    store.add('M');
    store.add('N');
    store.add('O');
    store.add('P');
    store.add('Q');
    store.add('R');
    store.add('S');
    store.add('T');
    store.add('U');
    store.add('V');
    store.add('W');
    store.add('X');
    store.add('Y');
    store.add('Z');
    mDataList = List<String>.generate(content.length, (index) => content[index]);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Stack(
        alignment: AlignmentDirectional.centerEnd,
        children: <Widget>[
          ListView.builder(
            controller: _controller,
            itemCount: store.length,
            itemBuilder: buildItem,
          ),
          SideBar(
              list: mDataList,
              textColor: Colors.blue,
              color: Colors.blue.withOpacity(0.2),
              valueChanged: (value) {
                _controller
                    .jumpTo(mDataList.indexOf(value) * 44.0); //card 差不多44的高度
              })
        ],
      ),
    );
  }

  Widget buildItem(BuildContext context, int index) {
    return Card(
      child: ListTile(
        title: Text(store[index]),
      ),
    );
  }
}

sider_bar.dart

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

///列表右侧的滑块
///textColor 文字颜色
///color 按住之后的颜色
///valueChanged 回调
///
class SideBar extends StatefulWidget {
  final List<String> list;
  final Color textColor;
  final Color color;
  final ValueChanged<String> valueChanged;

  SideBar(
      {Key key,
      @required this.list,
      @required this.textColor,
      @required this.color,
      @required this.valueChanged})
      : assert(list != null || list.length > 0),
        assert(valueChanged != null),
        super(key: key);

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

class _SideBarState extends State<SideBar> {
  List<Widget> _widgetList;
  bool _isTaped = false;
  String _selectStr = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _widgetList = List<Widget>.generate(widget.list.length, (index) {
      return Padding(
        padding: const EdgeInsets.only(bottom: 2.0),
        child: Text(
          widget.list[index],
          style: TextStyle(color: widget.textColor, fontSize: 14.0),
        ),
      );
    });
  }

  _onDragStart(BuildContext context, DragStartDetails start) {
    RenderBox getBox = context.findRenderObject();
    var local = getBox.globalToLocal(start.globalPosition);
    setState(() {
      _selectStr = _getCurrentStr(local.dy);
      widget.valueChanged(_selectStr);
      _isTaped = true;
    });
  }

  _onDragUpdate(BuildContext context, DragUpdateDetails update) {
    RenderBox getBox = context.findRenderObject();
    var local = getBox.globalToLocal(update.globalPosition);
    setState(() {
      _selectStr = _getCurrentStr(local.dy);
      widget.valueChanged(_selectStr);
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onVerticalDragStart: (DragStartDetails start) {
        _onDragStart(context, start);
      },
      onVerticalDragUpdate: (DragUpdateDetails update) =>
          _onDragUpdate(context, update),
      onVerticalDragEnd: (DragEndDetails end) {
        setState(() {
          _isTaped = false;
        });
      },
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          _isTaped
              ? Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(
                      right: MediaQuery.of(context).size.width / 2 - 70 + 15),
                  width: 70.0,
                  height: 70.0,
                  decoration: BoxDecoration(
                      color: widget.color,
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.all(Radius.circular(5.0))),
                  child: Text(
                    _selectStr,
                    style: Theme.of(context)
                        .textTheme
                        .display1
                        .copyWith(color: widget.textColor),
                  ),
                )
              : SizedBox(),
          Container(
            padding: EdgeInsets.symmetric(vertical: 8.0),
            decoration: BoxDecoration(
                color: _isTaped ? widget.color : Colors.transparent,
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.all(Radius.circular(15.0))),
            width: 26.0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: _widgetList,
            ),
          ),
        ],
      ),
    );
  }

  String _getCurrentStr(double dy) {
    int index = (dy / 19.0).round();
    if (index <= 0) {
      return widget.list.first;
    } else if (index >= widget.list.length) {
      return widget.list.last;
    } else {
      return widget.list[index];
    }
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in