logo
Tags down

shadow

giving the header and body of ExpansionPanelList different colors


By : robdotis
Date : October 15 2020, 08:10 PM
To fix the issue you can do You can do the same thing you did with the header and simply wrap the body in a Container with the specified color.
Working sample:
code :
class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: CustomExpansionPanelList(
          expansionCallback: (index, isExpanded) {
            print("$index: expanded=$isExpanded");
          },
          children: [
            ExpansionPanel(
              isExpanded: true,
              headerBuilder: (context, isExpanded) {
                return Text("Header");
              },
              body: Center(
                child: Text("Hello"),
              ),
            )
          ],
        ),
      ),
    );
  }
}

const double _kPanelHeaderCollapsedHeight = 45.0;
const double _kPanelHeaderExpandedHeight = 45.0;

class CustomExpansionPanelList extends StatelessWidget {
  const CustomExpansionPanelList(
      {Key key,
      this.children: const <ExpansionPanel>[],
      this.expansionCallback,
      this.animationDuration: kThemeAnimationDuration})
      : assert(children != null),
        assert(animationDuration != null),
        super(key: key);

  final List<ExpansionPanel> children;

  final ExpansionPanelCallback expansionCallback;

  final Duration animationDuration;

  bool _isChildExpanded(int index) {
    return children[index].isExpanded;
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> items = <Widget>[];
    const EdgeInsets kExpandedEdgeInsets = const EdgeInsets.symmetric(
        vertical: _kPanelHeaderExpandedHeight - _kPanelHeaderCollapsedHeight);

    for (int index = 0; index < children.length; index += 1) {
      if (_isChildExpanded(index) && index != 0 && !_isChildExpanded(index - 1))
        items.add(new Divider(
          key: new _SaltedKey<BuildContext, int>(context, index * 2 - 1),
          height: 15.0,
          color: Colors.transparent,
        ));

      final Row header = new Row(
        children: <Widget>[
          new Container(
            margin: const EdgeInsetsDirectional.only(end: 0.0),
            child: new ExpandIcon(
              isExpanded: _isChildExpanded(index),
              padding: const EdgeInsets.all(0.0),
              onPressed: (bool isExpanded) {
                if (expansionCallback != null) {
                  expansionCallback(index, isExpanded);
                }
              },
            ),
          ),
          new Expanded(
            child: new AnimatedContainer(
              duration: animationDuration,
              curve: Curves.fastOutSlowIn,
              margin: _isChildExpanded(index)
                  ? kExpandedEdgeInsets
                  : EdgeInsets.zero,
              child: new SizedBox(
                height: _kPanelHeaderCollapsedHeight,
                child: children[index].headerBuilder(
                  context,
                  children[index].isExpanded,
                ),
              ),
            ),
          ),
        ],
      );

      double _radiusValue = _isChildExpanded(index) ? 8.0 : 8.0;
      items.add(
        new Padding(
          padding: EdgeInsets.only(bottom: 10),
          child: new Container(
            key: new _SaltedKey<BuildContext, int>(context, index * 2),
            child: new Material(
              elevation: 2.0,
              borderRadius:
                  new BorderRadius.all(new Radius.circular(_radiusValue)),
              child: new Column(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: const Radius.circular(8.0),
                          topRight: const Radius.circular(8.0)),
                      color: Colors.red,
                    ),
                    child: header,
                  ),
                  new AnimatedCrossFade(
                    firstChild: new Container(height: 0.0),
                    /*** START - NEW CODE ***/
                    secondChild: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                            bottomLeft: const Radius.circular(8.0),
                            bottomRight: const Radius.circular(8.0)),
                        color: Colors.blue,
                      ),
                      child: children[index].body,
                    ),
                    /*** END - NEW CODE ***/
                    firstCurve:
                        const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
                    secondCurve:
                        const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
                    sizeCurve: Curves.fastOutSlowIn,
                    crossFadeState: _isChildExpanded(index)
                        ? CrossFadeState.showSecond
                        : CrossFadeState.showFirst,
                    duration: animationDuration,
                  ),
                ],
              ),
            ),
          ),
        ),
      );

      if (_isChildExpanded(index) && index != children.length - 1)
        items.add(new Divider(
          key: new _SaltedKey<BuildContext, int>(context, index * 2 + 1),
          height: 15.0,
        ));
    }

    return new Column(
      children: items,
    );
  }
}


Share : facebook icon twitter icon

How to make header/body/footer 'popup' div with variable height body?


By : Eric Rodriguez
Date : March 29 2020, 07:55 AM
this will help Try a demo here http://jsfiddle.net/XfPAG/4/. The idea is using absolute position:
HTML
code :
<div id="wrap">
  <div id="header">
    ... 25 px high space fixed to the top
  </div>
  <div id="body">
    ... stretches to fill the space available height/width ... 
    ... scrollbars available when the body content exceeds height available ...
    ... jQuery allows user to resize the whole window, so this body should always fill ...
  </div>
  <div id="footer">
    ... 50px footer with controls, must always be fixed to bottom of window ...
    ... must never move no matter if the user scrolls the body ...
  </div>
</div>
#wrap, #header, #body, #footer {
  position: absolute;
  left: 0;
  right: 0;
}

#wrap {
  top: 0;
  bottom: 0;
}

#header {
  height: 25px;
  top: 0;
}

#footer {
  height: 50px;
  bottom: 0;
}

#body {
  top: 25px;
  bottom: 50px;
  overflow: auto;
}

Resizable DIV container with header/body/footer where body is scrollable


By : Gherardo
Date : March 29 2020, 07:55 AM
will be helpful for those in need I've missed something very simple, but I'm unable to get this resizable div container to work the way I want. , I solved your problem by adding a resize handler:
code :
$(".filter-form").resizable().resize(function()
{
    var bodyHeight = $(this).height() - 40;

    $('.filter-body').css('height', bodyHeight + "px");
});

Aligning Panels in center and changing their header and body colors with bootstrap and css


By : Evan Shen
Date : March 29 2020, 07:55 AM
it helps some times To align the accordion panels to the center of the page you can make use of the bootstrap grid system. The bootstrap grid system is a powerfull way to make pages responsive.
Check out the bootstrap page - grid option. It takes a bit of time to get your head around it but i can save you much time in the future. There are also several tutorials on youtube about the usage of the grid system.

VS Code giving header errors for Arduino? Missing official header?


By : vikrant
Date : March 29 2020, 07:55 AM
like below fixes the issue Update: Extra libraries do not need to be installed. IntelliSense can operate using only the headers installed by the Arduino app, but a few others may help. More updates below.
When VSCode builds, it uses the SDK. However, IntelliSense cannot read the SDK files to operate (as far as I can tell), which throws these annoying errors and eliminates most code completion capabilities.
code :
"includePath": [
    "${workspaceFolder}/libraries",
    "/System/Library/Frameworks/Kernel.framework/Versions/A/Headers",
    "/Applications/Arduino.app/Contents/Java/libraries",
    "/Applications/Arduino.app/Contents/Java/hardware/tools/avr/avr/include",
    "/Applications/Arduino.app/Contents/Java/hardware/arduino/avr/variants/standard"
],
"browse": {
    "limitSymbolsToIncludedHeaders": false,
    "path": [
        "/System/Library/Frameworks/Kernel.framework/Versions/A/Headers",
        "/Applications/Arduino.app/Contents/Java/"
    ]
},
"forcedInclude": [
    "/Applications/Arduino.app/Contents/Java/hardware/arduino/avr/cores/arduino/Arduino.h"
],
"includePath": [
    "{$workspaceFolder}/libraries",
    "C:/Program Files (x86)/Arduino/hardware/tools/avr/lib/gcc/avr/5.4.0/include",
    "C:/Program Files (x86)/Arduino/hardware/arduino/avr/cores/arduino",
    "C:/Program Files (x86)/Arduino/hardware/arduino/avr/variants/standard",
    "C:/Program Files (x86)/Arduino",
],

I am trying to design a header with multiple css colors on it. Only from colors


By : Tim Burrow
Date : March 29 2020, 07:55 AM
To fix the issue you can do As you can see, you have 4 colors so we can do it in this way :
1) first color will be the background of the container
code :
body {
  overflow: hidden;
}

.container {
  background: red;
  height: 100px;
  border-left: 65px solid blue;
  transform: skew(30deg);
  overflow: hidden;
  width: 110%;
  position: relative;
  left: -40px;
}

.container:before {
  content: " ";
  position: absolute;
  background: pink;
  width: 500px;
  height: 100px;
  left: -180px;
  transform: skew(60deg);
}

.container:after {
  content: " ";
  background: green;
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: -126px;
  left: 200px;
  transform: rotate(30deg) skew(-10deg);
}
<div class="container"></div>
shadow
Privacy Policy - Terms - Contact Us © voile276.org