build method
Describes the part of the user interface represented by this component.
The framework calls this method when this component is inserted into the tree in a given BuildContext and when the dependencies of this component change (e.g., an InheritedComponent referenced by this component changes). This method can potentially be called in every frame and should not have any side effects beyond building a component.
The framework replaces the subtree below this component with the component returned by this method, either by updating the existing subtree or by removing the subtree and inflating a new subtree, depending on whether the component returned by this method can update the root of the existing subtree, as determined by calling Component.canUpdate.
Typically implementations return a newly created constellation of components that are configured with information from this component's constructor and from the given BuildContext.
The given BuildContext contains information about the location in the tree at which this component is being built. For example, the context provides the set of inherited components for this location in the tree. A given component might be built with multiple different BuildContext arguments over time if the component is moved around the tree or if the component is inserted into the tree in multiple places at once.
The implementation of this method must only depend on:
- the fields of the component, which themselves must not change over time, and
- any ambient state obtained from the
contextusing BuildContext.dependOnInheritedComponentOfExactType.
If a component's build method is to depend on anything else, use a StatefulComponent instead.
See also:
- StatelessComponent, which contains the discussion on performance considerations.
Implementation
@override
Component build(BuildContext context) {
const width = 106;
const height = 40;
return svg(
viewBox: '0 0 $width $height',
width: width.px,
height: height.px,
attributes: {'fill': 'none'},
[
rect(fill: backgroundColor, width: '$width', height: '$height', rx: '10', []),
path(
stroke: iconColor,
strokeWidth: '1.25',
d: 'M14.8115 26.0483C14.8115 26.0483 16.5768 27.9534 18.269 29.3852L21.4834 25.4226L22.5262 26.0483C23.9862 23.5455 22.3041 22.096 22.3041 22.096C24.1264 21.8356 23.7359 19.1022 23.7359 19.1022C22.8248 18.0608 22.6946 17.0195 22.8248 16.3687C22.9454 15.8288 22.754 15.2687 22.5644 14.9368L23.7359 13.6352L24.6139 13.7432C24.6139 11.6576 21.2503 10.6148 20.8598 10.6148C20.4693 10.6148 19.4404 11.4224 19.1801 12.3335L16.0561 12.5939C15.6458 8.11202 9.46732 13.0672 9.59749 14.3689L10.6403 13.9517L12.021 15.848C9.93835 17.41 9.59748 20.8342 9.59748 20.8342L11.3702 20.534C10.459 22.3563 10.7193 24.4389 10.7193 24.4389L12.3088 23.7541C12.439 25.4463 13.7687 27.2996 13.7687 27.2996L14.8115 26.0483Z',
attributes: {'stroke-linejoin': 'round'},
[],
),
path(
stroke: iconColor,
strokeWidth: '1.25',
d: 'M16.0558 12.5941C15.4049 12.5941 15.0197 13.1178 13.9769 14.3691C12.9341 15.6205 13.4524 15.4578 11.6301 16.1086',
attributes: {'stroke-linejoin': 'round'},
[],
),
path(
stroke: iconColor,
strokeWidth: '1.25',
d: 'M19.1799 12.3338C20.2213 12.5941 21.6531 13.3751 22.5642 14.9371',
attributes: {'stroke-linejoin': 'round'},
[],
),
path(
stroke: iconColor,
strokeWidth: '1.25',
d: 'M11.3701 20.5339C11.3701 20.5339 12.1511 19.1021 13.8433 18.3211C12.0209 19.1021 11.3701 20.5339 11.3701 20.5339Z',
attributes: {'stroke-linejoin': 'round'},
[],
),
path(
fill: iconColor,
d: 'M21.5648 18.9821C21.5648 18.9821 20.0028 18.7218 20.2632 19.8933C20.5813 21.3251 22.7363 20.6743 22.6061 19.7631C22.6061 18.9821 21.5648 18.9821 21.5648 18.9821Z',
[],
),
path(
stroke: iconColor,
strokeWidth: '1.25',
d: 'M22.4341 22.0961C21.2626 22.0961 18.9826 22.2943 17.7312 21.46C19.1891 22.7114 23.3603 21.0429 22.9432 24.797C23.3603 23.1285 22.5281 22.5028 22.4341 22.0961Z',
attributes: {'stroke-linejoin': 'round'},
[],
),
path(
fill: textColor,
d: 'M48.6833 14.4545H51.7231V24.5966C51.7231 25.5341 51.5124 26.3485 51.091 27.0398C50.6743 27.7311 50.0943 28.2637 49.3509 28.6378C48.6075 29.0118 47.7434 29.1989 46.7586 29.1989C45.8826 29.1989 45.0872 29.045 44.3722 28.7372C43.662 28.4247 43.0985 27.9512 42.6819 27.3168C42.2652 26.6776 42.0592 25.875 42.064 24.9091H45.125C45.1345 25.2926 45.2126 25.6217 45.3594 25.8963C45.5109 26.1662 45.7169 26.3745 45.9773 26.5213C46.2425 26.6634 46.555 26.7344 46.9148 26.7344C47.2936 26.7344 47.6132 26.6539 47.8736 26.4929C48.1388 26.3272 48.34 26.0857 48.4773 25.7685C48.6146 25.4512 48.6833 25.0606 48.6833 24.5966V14.4545ZM57.3196 29.206C56.6236 29.206 56.0034 29.0852 55.4589 28.8438C54.9143 28.5975 54.4835 28.2353 54.1662 27.7571C53.8537 27.2741 53.6975 26.6728 53.6975 25.9531C53.6975 25.3471 53.8088 24.8381 54.0313 24.4261C54.2538 24.0142 54.5569 23.6828 54.9404 23.4318C55.3239 23.1809 55.7595 22.9915 56.2472 22.8636C56.7396 22.7358 57.2557 22.6458 57.7955 22.5938C58.43 22.5275 58.9413 22.4659 59.3296 22.4091C59.7178 22.3475 59.9996 22.2576 60.1748 22.1392C60.35 22.0208 60.4375 21.8456 60.4375 21.6136V21.571C60.4375 21.1212 60.2955 20.7732 60.0114 20.527C59.7321 20.2808 59.3343 20.1577 58.8182 20.1577C58.2737 20.1577 57.8405 20.2784 57.5185 20.5199C57.1965 20.7566 56.9835 21.0549 56.8793 21.4148L54.081 21.1875C54.2231 20.5246 54.5024 19.9517 54.9191 19.4688C55.3357 18.9811 55.8732 18.607 56.5313 18.3466C57.1942 18.0814 57.9612 17.9489 58.8324 17.9489C59.4385 17.9489 60.0185 18.0199 60.5725 18.1619C61.1312 18.304 61.626 18.5241 62.0569 18.8224C62.4925 19.1207 62.8357 19.5043 63.0867 19.973C63.3376 20.437 63.4631 20.9934 63.4631 21.642V29H60.5938V27.4872H60.5086C60.3334 27.8281 60.099 28.1288 59.8054 28.3892C59.5119 28.6449 59.1591 28.8461 58.7472 28.9929C58.3353 29.1349 57.8594 29.206 57.3196 29.206ZM58.1861 27.1179C58.6312 27.1179 59.0242 27.0303 59.3651 26.8551C59.706 26.6752 59.9735 26.4337 60.1677 26.1307C60.3618 25.8277 60.4589 25.4844 60.4589 25.1009V23.9432C60.3642 24.0047 60.2339 24.0616 60.0682 24.1136C59.9072 24.161 59.725 24.206 59.5214 24.2486C59.3178 24.2865 59.1142 24.322 58.9106 24.3551C58.707 24.3835 58.5223 24.4096 58.3566 24.4332C58.0015 24.4853 57.6913 24.5682 57.4262 24.6818C57.161 24.7955 56.9551 24.9493 56.8083 25.1435C56.6615 25.3329 56.5881 25.5696 56.5881 25.8537C56.5881 26.2656 56.7373 26.5805 57.0356 26.7983C57.3386 27.0114 57.7221 27.1179 58.1861 27.1179ZM74.8871 21.2017L72.1172 21.3722C72.0699 21.1354 71.9681 20.9223 71.8118 20.733C71.6556 20.5388 71.4496 20.3849 71.1939 20.2713C70.943 20.1529 70.6423 20.0938 70.2919 20.0938C69.8232 20.0938 69.4278 20.1932 69.1059 20.392C68.7839 20.5862 68.6229 20.8466 68.6229 21.1733C68.6229 21.4337 68.7271 21.6539 68.9354 21.8338C69.1437 22.0137 69.5012 22.1581 70.0079 22.267L71.9823 22.6648C73.0429 22.8826 73.8336 23.233 74.3544 23.7159C74.8753 24.1989 75.1357 24.8333 75.1357 25.6193C75.1357 26.3343 74.925 26.9616 74.5036 27.5014C74.0869 28.0412 73.514 28.4626 72.7848 28.7656C72.0604 29.0639 71.2247 29.2131 70.2777 29.2131C68.8336 29.2131 67.683 28.9124 66.826 28.3111C65.9738 27.705 65.4742 26.8812 65.3275 25.8395L68.3033 25.6832C68.3933 26.1236 68.6111 26.4598 68.9567 26.6918C69.3024 26.919 69.7451 27.0327 70.2848 27.0327C70.8151 27.0327 71.2413 26.9309 71.5633 26.7273C71.89 26.5189 72.0557 26.2514 72.0604 25.9247C72.0557 25.6501 71.9397 25.4252 71.7124 25.25C71.4851 25.0701 71.1348 24.9328 70.6613 24.8381L68.7721 24.4616C67.7067 24.2486 66.9136 23.8793 66.3928 23.3537C65.8767 22.8281 65.6187 22.1581 65.6187 21.3438C65.6187 20.643 65.808 20.0393 66.1868 19.5327C66.5704 19.026 67.1078 18.6354 67.7991 18.3608C68.4951 18.0862 69.3095 17.9489 70.2422 17.9489C71.6201 17.9489 72.7044 18.2401 73.4951 18.8224C74.2905 19.4048 74.7545 20.1979 74.8871 21.2017ZM77.0409 33.0909V18.0909H80.0238V19.9233H80.1588C80.2914 19.6297 80.4831 19.3314 80.7341 19.0284C80.9897 18.7206 81.3212 18.465 81.7284 18.2614C82.1403 18.053 82.6517 17.9489 83.2625 17.9489C84.0579 17.9489 84.7918 18.1572 85.4642 18.5739C86.1365 18.9858 86.6739 19.6084 87.0764 20.4418C87.4789 21.2704 87.6801 22.3097 87.6801 23.5597C87.6801 24.7765 87.4836 25.804 87.0906 26.642C86.7023 27.4754 86.172 28.1075 85.4997 28.5384C84.8321 28.9645 84.084 29.1776 83.2554 29.1776C82.6682 29.1776 82.1687 29.0805 81.7568 28.8864C81.3496 28.6922 81.0158 28.4484 80.7554 28.1548C80.495 27.8565 80.2961 27.5559 80.1588 27.2528H80.0665V33.0909H77.0409ZM80.0025 23.5455C80.0025 24.1941 80.0925 24.7599 80.2724 25.2429C80.4523 25.7259 80.7128 26.1023 81.0537 26.3722C81.3946 26.6373 81.8089 26.7699 82.2966 26.7699C82.789 26.7699 83.2057 26.6349 83.5466 26.3651C83.8875 26.0904 84.1455 25.7116 84.3207 25.2287C84.5006 24.741 84.5906 24.1799 84.5906 23.5455C84.5906 22.9157 84.503 22.3617 84.3278 21.8835C84.1526 21.4053 83.8946 21.0312 83.5537 20.7614C83.2128 20.4915 82.7937 20.3565 82.2966 20.3565C81.8041 20.3565 81.3875 20.4867 81.0466 20.7472C80.7104 21.0076 80.4523 21.3769 80.2724 21.8551C80.0925 22.3333 80.0025 22.8968 80.0025 23.5455ZM89.6971 29V18.0909H92.6304V19.9943H92.744C92.9429 19.3172 93.2767 18.8059 93.7454 18.4602C94.2142 18.1098 94.754 17.9347 95.3647 17.9347C95.5163 17.9347 95.6796 17.9441 95.8548 17.9631C96.03 17.982 96.1839 18.008 96.3165 18.0412V20.7259C96.1744 20.6832 95.9779 20.6454 95.727 20.6122C95.476 20.5791 95.2464 20.5625 95.038 20.5625C94.593 20.5625 94.1952 20.6596 93.8449 20.8537C93.4992 21.0431 93.2246 21.3082 93.021 21.6491C92.8221 21.9901 92.7227 22.383 92.7227 22.8281V29H89.6971Z',
[],
),
path(
fill: textColor,
d: 'M56.9197 14V7.45455H59.3167C59.7812 7.45455 60.1658 7.53125 60.4705 7.68466C60.7752 7.83594 61.0032 8.04155 61.1545 8.30149C61.3057 8.5593 61.3814 8.85014 61.3814 9.17401C61.3814 9.44673 61.3313 9.67685 61.2312 9.86435C61.131 10.0497 60.9968 10.1989 60.8285 10.3118C60.6623 10.4226 60.479 10.5036 60.2787 10.5547V10.6186C60.4961 10.6293 60.7081 10.6996 60.9147 10.8295C61.1236 10.9574 61.2961 11.1396 61.4325 11.3761C61.5689 11.6126 61.637 11.9002 61.637 12.239C61.637 12.5735 61.5582 12.8739 61.4005 13.1403C61.245 13.4045 61.0042 13.6143 60.6782 13.7699C60.3522 13.9233 59.9357 14 59.4286 14H56.9197ZM57.9073 13.1531H59.3327C59.8057 13.1531 60.1445 13.0614 60.3491 12.8782C60.5536 12.695 60.6559 12.4659 60.6559 12.1911C60.6559 11.9844 60.6037 11.7947 60.4993 11.6222C60.3949 11.4496 60.2457 11.3121 60.0518 11.2099C59.8601 11.1076 59.6321 11.0565 59.3679 11.0565H57.9073V13.1531ZM57.9073 10.2862H59.2304C59.452 10.2862 59.6513 10.2436 59.8281 10.1584C60.0071 10.0732 60.1488 9.95384 60.2532 9.80043C60.3597 9.64489 60.413 9.46165 60.413 9.25071C60.413 8.98011 60.3182 8.7532 60.1285 8.56996C59.9389 8.38672 59.6481 8.2951 59.256 8.2951H57.9073V10.2862ZM65.8414 11.9641V9.09091H66.8002V14H65.8606V13.1499H65.8095C65.6965 13.4119 65.5154 13.6303 65.2661 13.805C65.019 13.9776 64.7111 14.0639 64.3425 14.0639C64.0271 14.0639 63.748 13.9947 63.5051 13.8562C63.2644 13.7156 63.0747 13.5078 62.9362 13.233C62.7999 12.9581 62.7317 12.6183 62.7317 12.2134V9.09091H63.6873V12.0984C63.6873 12.4329 63.78 12.6992 63.9654 12.8974C64.1507 13.0955 64.3915 13.1946 64.6877 13.1946C64.8666 13.1946 65.0445 13.1499 65.2214 13.0604C65.4004 12.9709 65.5484 12.8356 65.6656 12.6545C65.785 12.4734 65.8435 12.2433 65.8414 11.9641ZM68.0842 14V9.09091H69.0398V14H68.0842ZM68.5668 8.33345C68.4006 8.33345 68.2579 8.27805 68.1386 8.16726C68.0214 8.05433 67.9628 7.9201 67.9628 7.76456C67.9628 7.60689 68.0214 7.47266 68.1386 7.36186C68.2579 7.24893 68.4006 7.19247 68.5668 7.19247C68.733 7.19247 68.8747 7.24893 68.9919 7.36186C69.1112 7.47266 69.1709 7.60689 69.1709 7.76456C69.1709 7.9201 69.1112 8.05433 68.9919 8.16726C68.8747 8.27805 68.733 8.33345 68.5668 8.33345ZM71.281 7.45455V14H70.3254V7.45455H71.281ZM74.8582 9.09091V9.85795H72.1767V9.09091H74.8582ZM72.8958 7.91477H73.8514V12.5586C73.8514 12.744 73.8791 12.8835 73.9345 12.9773C73.9899 13.0689 74.0613 13.1317 74.1487 13.1658C74.2382 13.1978 74.3351 13.2138 74.4395 13.2138C74.5162 13.2138 74.5833 13.2085 74.6409 13.1978C74.6984 13.1871 74.7431 13.1786 74.7751 13.1722L74.9477 13.9616C74.8923 13.983 74.8135 14.0043 74.7112 14.0256C74.6089 14.049 74.4811 14.0618 74.3277 14.0639C74.0762 14.0682 73.8419 14.0234 73.6245 13.9297C73.4072 13.8359 73.2314 13.6911 73.0972 13.495C72.963 13.299 72.8958 13.0529 72.8958 12.7567V7.91477ZM79.3614 14L77.9168 9.09091H78.9044L79.8664 12.696H79.9143L80.8795 9.09091H81.8671L82.8259 12.68H82.8738L83.8294 9.09091H84.817L83.3756 14H82.4008L81.4037 10.4556H81.3301L80.333 14H79.3614ZM85.7239 14V9.09091H86.6795V14H85.7239ZM86.2065 8.33345C86.0403 8.33345 85.8975 8.27805 85.7782 8.16726C85.661 8.05433 85.6024 7.9201 85.6024 7.76456C85.6024 7.60689 85.661 7.47266 85.7782 7.36186C85.8975 7.24893 86.0403 7.19247 86.2065 7.19247C86.3727 7.19247 86.5144 7.24893 86.6315 7.36186C86.7509 7.47266 86.8105 7.60689 86.8105 7.76456C86.8105 7.9201 86.7509 8.05433 86.6315 8.16726C86.5144 8.27805 86.3727 8.33345 86.2065 8.33345ZM90.2566 9.09091V9.85795H87.5752V9.09091H90.2566ZM88.2943 7.91477H89.2499V12.5586C89.2499 12.744 89.2776 12.8835 89.333 12.9773C89.3884 13.0689 89.4598 13.1317 89.5471 13.1658C89.6366 13.1978 89.7336 13.2138 89.838 13.2138C89.9147 13.2138 89.9818 13.2085 90.0393 13.1978C90.0968 13.1871 90.1416 13.1786 90.1735 13.1722L90.3461 13.9616C90.2907 13.983 90.2119 14.0043 90.1096 14.0256C90.0073 14.049 89.8795 14.0618 89.7261 14.0639C89.4747 14.0682 89.2403 14.0234 89.023 13.9297C88.8056 13.8359 88.6299 13.6911 88.4956 13.495C88.3614 13.299 88.2943 13.0529 88.2943 12.7567V7.91477ZM92.3748 11.0852V14H91.4192V7.45455H92.362V9.88991H92.4227C92.5378 9.62571 92.7136 9.41584 92.9501 9.2603C93.1866 9.10476 93.4955 9.02699 93.8769 9.02699C94.2136 9.02699 94.5076 9.09624 94.759 9.23473C95.0126 9.37322 95.2086 9.5799 95.3471 9.85476C95.4877 10.1275 95.558 10.4684 95.558 10.8775V14H94.6024V10.9925C94.6024 10.6325 94.5097 10.3533 94.3244 10.1552C94.139 9.9549 93.8812 9.85476 93.5509 9.85476C93.3251 9.85476 93.1227 9.9027 92.9437 9.99858C92.7668 10.0945 92.6273 10.2351 92.525 10.4205C92.4249 10.6037 92.3748 10.8253 92.3748 11.0852Z',
[],
),
],
);
}